diff --git a/app/components/publications/PublicationHeader.tsx b/app/components/publications/PublicationHeader.tsx new file mode 100644 index 0000000..5bcba22 --- /dev/null +++ b/app/components/publications/PublicationHeader.tsx @@ -0,0 +1,45 @@ +import React from 'react'; + +const PublicationHeader = () => { + return ( +
+
+ + {/* Title row + action buttons */} +
+
+

Publication Repository

+

Search, filter, and access over 15,000 academic publications and research papers.

+
+
+ + +
+
+ + {/* Search bar */} +
+ + + + +
+ +
+
+ +
+
+ ); +}; + +export default PublicationHeader; diff --git a/app/components/publications/PublicationResults.tsx b/app/components/publications/PublicationResults.tsx new file mode 100644 index 0000000..7f63444 --- /dev/null +++ b/app/components/publications/PublicationResults.tsx @@ -0,0 +1,169 @@ +'use client'; +import React, { useState } from 'react'; +import Link from 'next/link'; + +const SORT_OPTIONS = ['Relevance', 'Newest First', 'Oldest First', 'Most Cited']; + +const PublicationResults = () => { + const [isSortOpen, setIsSortOpen] = useState(false); + const [selectedSort, setSelectedSort] = useState('Relevance'); + + return ( +
+ + {/* Toolbar */} +
+

+ Showing 1-10 of 12,450 results +

+ +
+ +
+ + {isSortOpen && ( +
+ {SORT_OPTIONS.map((opt) => ( +
{ setSelectedSort(opt); setIsSortOpen(false); }} + > + {opt} +
+ ))} +
+ )} +
+
+
+ + {/* Cards */} +
+ + {/* Card 1 */} +
+
+

+ The Evolution of Democratic Institutions in Post-War Europe +

+
+ + Open Access + + Peer Reviewed +
+
+ +
+
+ + Dr. Elena Rostova, Prof. Marcus Chen +
+
+ October 2024 +
+
+ DOI: 10.1038/s41586-024 +
+
+ Center for Political Studies +
+
+ +

+ This paper examines the structural shifts in Western European democratic frameworks from 1945 to 1980. By analyzing institutional archives across France, Germany, and Italy, the research identifies a distinct divergence in how parliamentary powers were consolidated versus distributed. The findings challenge traditional narratives of a uniform democratic resurgence, suggesting instead that local historical contexts heavily dictated the adoption of specific liberal norms. +

+ +
+ Keywords: + Democracy + European History + Institutions +
+ +
+ + + +
+
+ + {/* Card 2 */} +
+
+

+ Cognitive Linguistics and the Framing of Modern Ethics +

+
+ + Institutional + +
+
+ +
+
+ + Dr. Sarah Jenkins +
+
+ August 2024 +
+
+ DOI: 10.1016/j.cogling.2024 +
+
+ +

+ An exploration into how metaphor and cognitive framing shape contemporary ethical debates. The study utilizes computational linguistics to analyze over 10,000 policy documents and public speeches, demonstrating a significant correlation between specific metaphorical structures and the resulting ethical policy frameworks adopted by legislative bodies. +

+ +
+ + +
+
+ +
+ + {/* Pagination */} +
+ + +
+ + + + ... + +
+ + +
+ +
+ ); +}; + +export default PublicationResults; diff --git a/app/components/publications/PublicationSidebar.tsx b/app/components/publications/PublicationSidebar.tsx new file mode 100644 index 0000000..37b7de2 --- /dev/null +++ b/app/components/publications/PublicationSidebar.tsx @@ -0,0 +1,123 @@ +'use client'; + +import React, { useState } from 'react'; + +const YEARS = ['2024 (1,245)', '2023 (3,412)', '2022 (2,890)']; +const DOMAINS = ['Liberal Arts (4,521)', 'Social Sciences (3,210)', 'Humanities (2,980)', 'Political Science (1,840)']; +const ACCESS_TYPES = ['Open Access', 'Institutional Login', 'Request Access']; + +const AccordionSection = ({ + title, + open, + onToggle, + children, +}: { + title: string; + open: boolean; + onToggle: () => void; + children: React.ReactNode; +}) => ( +
+ +
+ {children} +
+
+); + +const PublicationSidebar = () => { + const [isYearOpen, setIsYearOpen] = useState(true); + const [isDomainOpen, setIsDomainOpen] = useState(true); + const [isAccessOpen, setIsAccessOpen] = useState(true); + const [minYear, setMinYear] = useState(''); + const [maxYear, setMaxYear] = useState(''); + + return ( + + ); +}; + +export default PublicationSidebar; diff --git a/app/components/publications/publications.css b/app/components/publications/publications.css new file mode 100644 index 0000000..6c797e2 --- /dev/null +++ b/app/components/publications/publications.css @@ -0,0 +1,787 @@ +/* ============================================================ + publications.css — Scoped under .pub-wrapper + Matches the HTML reference design exactly. + All rules are scoped to avoid conflicts with Bootstrap/main.css + ============================================================ */ + +/* --- Local CSS Variables (override globals for this page) --- */ +.pub-wrapper { + --pub-blue: #263c6f; + --pub-blue-hover: #1d2e55; + --pub-blue-light: #f0f4f8; + --pub-border: #e5e7eb; + --pub-text: #111827; + --pub-muted: #6b7280; + --pub-bg: #f9fafb; + --pub-accent: #3b82f6; + + background-color: var(--pub-bg); + width: 100%; +} + +/* ============================================================ + SEARCH HEADER SECTION + ============================================================ */ +.pub-wrapper #repo-header { + width: 100%; + background-color: #ffffff; + border-bottom: 1px solid var(--pub-border); + padding-top: 3rem; + padding-bottom: 3rem; +} + +.pub-wrapper #repo-header h1 { + font-size: 2.25rem; + font-weight: 700; + color: var(--pub-text); + letter-spacing: -0.025em; + margin-bottom: 0.5rem; + line-height: 2.5rem; +} + +.pub-wrapper #repo-header p { + color: var(--pub-muted); + font-size: 1.125rem; + margin: 0; +} + +/* Search bar */ +.pub-wrapper .pub-search-bar { + position: relative; + width: 100%; + border-radius: 0.75rem; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); +} + +.pub-wrapper .pub-search-bar input { + display: block; + width: 100%; + padding: 1rem 8rem 1rem 3rem; + border: 1px solid var(--pub-border); + border-radius: 0.75rem; + font-size: 1.125rem; + color: var(--pub-text); + background-color: #ffffff; + outline: none; + transition: border-color 0.2s, box-shadow 0.2s; + box-sizing: border-box; +} + +.pub-wrapper .pub-search-bar input::placeholder { + color: var(--pub-muted); +} + +.pub-wrapper .pub-search-bar input:focus { + border-color: var(--pub-blue); + box-shadow: 0 0 0 2px rgba(38, 60, 111, 0.15); +} + +.pub-wrapper .pub-search-bar .pub-search-icon { + position: absolute; + top: 50%; + left: 1rem; + transform: translateY(-50%); + color: var(--pub-muted); + font-size: 1.125rem; + pointer-events: none; +} + +.pub-wrapper .pub-search-bar .pub-search-btn-wrap { + position: absolute; + top: 50%; + right: 0.5rem; + transform: translateY(-50%); +} + +/* ============================================================ + BUTTONS + ============================================================ */ +.pub-wrapper .pub-btn-primary { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background-color: var(--pub-blue); + color: #ffffff; + border: 1px solid var(--pub-blue); + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: background-color 0.2s; + text-decoration: none; + white-space: nowrap; +} + +.pub-wrapper .pub-btn-primary:hover { + background-color: var(--pub-blue-hover); + color: #ffffff; +} + +.pub-wrapper .pub-btn-outline { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background-color: #ffffff; + color: var(--pub-text); + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: border-color 0.2s, color 0.2s; + text-decoration: none; + white-space: nowrap; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); +} + +.pub-wrapper .pub-btn-outline:hover { + border-color: var(--pub-blue); + color: var(--pub-blue); +} + +/* ============================================================ + MAIN CONTENT LAYOUT + ============================================================ */ +.pub-wrapper #repo-content { + padding-top: 2.5rem; + padding-bottom: 2.5rem; +} + +.pub-wrapper .pub-layout { + display: flex; + flex-direction: column; + gap: 2rem; +} + +@media (min-width: 1024px) { + .pub-wrapper .pub-layout { + flex-direction: row; + } +} + +/* ============================================================ + SIDEBAR + ============================================================ */ +.pub-wrapper .pub-sidebar { + width: 100%; + flex-shrink: 0; +} + +@media (min-width: 1024px) { + .pub-wrapper .pub-sidebar { + width: 20rem; /* 320px */ + min-width: 20rem; + max-width: 20rem; + } +} + +.pub-wrapper .pub-sidebar-inner { + background-color: #ffffff; + border-radius: 0.75rem; + border: 1px solid var(--pub-border); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + padding: 1.25rem; + position: sticky; + top: 7rem; /* below fixed header */ + height: fit-content; +} + +.pub-wrapper .pub-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1.5rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--pub-border); +} + +.pub-wrapper .pub-sidebar-header h2 { + font-size: 1.125rem; + font-weight: 700; + color: var(--pub-text); + display: flex; + align-items: center; + gap: 0.5rem; + margin: 0; +} + +.pub-wrapper .pub-sidebar-header h2 i { + color: var(--pub-blue); +} + +.pub-wrapper .pub-sidebar-header .pub-clear-btn { + font-size: 0.875rem; + color: var(--pub-accent); + font-weight: 500; + background: none; + border: none; + cursor: pointer; + padding: 0; + text-decoration: none; +} + +.pub-wrapper .pub-sidebar-header .pub-clear-btn:hover { + text-decoration: underline; +} + +/* Accordion */ +.pub-wrapper .pub-accordion { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.pub-wrapper .pub-accordion-item { + /* no extra styles needed */ +} + +.pub-wrapper .pub-accordion-trigger { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + text-align: left; + font-size: 0.9375rem; + font-weight: 600; + color: var(--pub-text); + background: none; + border: none; + cursor: pointer; + padding: 0; + margin-bottom: 0.75rem; +} + +.pub-wrapper .pub-accordion-trigger i { + font-size: 0.75rem; + color: var(--pub-muted); + transition: transform 0.3s ease; +} + +.pub-wrapper .pub-accordion-trigger.open i { + transform: rotate(180deg); +} + +.pub-wrapper .pub-accordion-body { + overflow: hidden; + transition: max-height 0.3s ease-out, opacity 0.3s ease-out; + max-height: 0; + opacity: 0; +} + +.pub-wrapper .pub-accordion-body.open { + max-height: 600px; + opacity: 1; +} + +.pub-wrapper .pub-accordion-body .pub-filter-list { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding-bottom: 0.5rem; +} + +/* Filter checkbox labels */ +.pub-wrapper .pub-filter-label { + display: flex; + align-items: center; + gap: 0.75rem; + cursor: pointer; +} + +.pub-wrapper .pub-filter-label span { + font-size: 0.875rem; + color: var(--pub-text); + transition: color 0.15s; +} + +.pub-wrapper .pub-filter-label:hover span { + color: var(--pub-blue); +} + +/* Custom checkbox */ +.pub-wrapper .pub-checkbox { + appearance: none; + -webkit-appearance: none; + width: 1.15em; + height: 1.15em; + border: 1px solid var(--pub-border); + border-radius: 0.25em; + background-color: #ffffff; + display: grid; + place-content: center; + cursor: pointer; + flex-shrink: 0; + transition: background-color 0.15s, border-color 0.15s; +} + +.pub-wrapper .pub-checkbox::before { + content: ""; + width: 0.65em; + height: 0.65em; + transform: scale(0); + transition: transform 120ms ease-in-out; + background-color: #ffffff; + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); +} + +.pub-wrapper .pub-checkbox:checked { + background-color: var(--pub-blue); + border-color: var(--pub-blue); +} + +.pub-wrapper .pub-checkbox:checked::before { + transform: scale(1); +} + +/* Year range inputs */ +.pub-wrapper .pub-year-range { + display: flex; + gap: 0.5rem; + padding-top: 0.5rem; +} + +.pub-wrapper .pub-year-range input { + width: 50%; + padding: 0.375rem 0.5rem; + border: 1px solid var(--pub-border); + border-radius: 0.25rem; + font-size: 0.875rem; + color: var(--pub-text); + background-color: #ffffff; + outline: none; + transition: border-color 0.2s; + box-sizing: border-box; +} + +.pub-wrapper .pub-year-range input:focus { + border-color: var(--pub-blue); +} + +/* ============================================================ + RESULTS AREA + ============================================================ */ +.pub-wrapper .pub-results { + flex: 1; + min-width: 0; +} + +/* Results toolbar */ +.pub-wrapper .pub-results-toolbar { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + background-color: #ffffff; + padding: 1rem; + border-radius: 0.75rem; + border: 1px solid var(--pub-border); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + margin-bottom: 1.5rem; +} + +@media (min-width: 640px) { + .pub-wrapper .pub-results-toolbar { + flex-direction: row; + justify-content: space-between; + } +} + +.pub-wrapper .pub-results-count { + font-size: 0.875rem; + color: var(--pub-text); +} + +.pub-wrapper .pub-results-count strong { + font-weight: 700; +} + +.pub-wrapper .pub-sort-wrap { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.pub-wrapper .pub-sort-wrap label { + font-size: 0.875rem; + color: var(--pub-muted); + white-space: nowrap; +} + +.pub-wrapper .pub-sort-select { + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + color: var(--pub-text); + background-color: #ffffff; + outline: none; + cursor: pointer; + transition: border-color 0.2s; + min-width: 140px; +} + +.pub-wrapper .pub-sort-select:focus, +.pub-wrapper .pub-sort-select:hover { + border-color: var(--pub-blue); +} + +/* Sort dropdown (custom React dropdown) */ +.pub-wrapper .pub-sort-dropdown { + position: relative; +} + +.pub-wrapper .pub-sort-dropdown-btn { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + background-color: #ffffff; + color: var(--pub-text); + cursor: pointer; + min-width: 140px; + transition: border-color 0.2s; + outline: none; +} + +.pub-wrapper .pub-sort-dropdown-btn:hover, +.pub-wrapper .pub-sort-dropdown-btn.open { + border-color: var(--pub-blue); +} + +.pub-wrapper .pub-sort-dropdown-btn i { + font-size: 0.625rem; + color: var(--pub-muted); + transition: transform 0.3s; +} + +.pub-wrapper .pub-sort-dropdown-btn.open i { + transform: rotate(180deg); +} + +.pub-wrapper .pub-sort-dropdown-menu { + position: absolute; + top: calc(100% + 4px); + right: 0; + width: 100%; + background-color: #ffffff; + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); + z-index: 50; + overflow: hidden; + padding: 0.25rem 0; +} + +.pub-wrapper .pub-sort-dropdown-option { + padding: 0.5rem 1rem; + font-size: 0.875rem; + cursor: pointer; + transition: background-color 0.15s; + color: var(--pub-text); +} + +.pub-wrapper .pub-sort-dropdown-option:hover { + background-color: #f9fafb; +} + +.pub-wrapper .pub-sort-dropdown-option.selected { + background-color: var(--pub-blue-light); + color: var(--pub-blue); + font-weight: 600; +} + +/* ============================================================ + PUBLICATION CARD + ============================================================ */ +.pub-wrapper .pub-card-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.pub-wrapper .pub-card { + background-color: #ffffff; + border-radius: 0.75rem; + border: 1px solid var(--pub-border); + padding: 1.5rem; + transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; + cursor: default; +} + +.pub-wrapper .pub-card:hover { + border-color: var(--pub-blue); + box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); +} + +/* Card top row: title + badges */ +.pub-wrapper .pub-card-top { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 0.75rem; +} + +@media (min-width: 768px) { + .pub-wrapper .pub-card-top { + flex-direction: row; + justify-content: space-between; + } +} + +.pub-wrapper .pub-card-title { + font-size: 1.25rem; + font-weight: 700; + color: var(--pub-text); + line-height: 1.4; + margin: 0; + transition: color 0.2s; +} + +.pub-wrapper .pub-card:hover .pub-card-title { + color: var(--pub-blue); +} + +.pub-wrapper .pub-card-title a { + color: inherit; + text-decoration: none; +} + +.pub-wrapper .pub-card-title a:hover { + color: var(--pub-blue); +} + +/* Badges */ +.pub-wrapper .pub-badges { + display: flex; + gap: 0.5rem; + flex-shrink: 0; + flex-wrap: wrap; +} + +.pub-wrapper .pub-badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.25rem 0.625rem; + border-radius: 0.25rem; + font-size: 0.75rem; + font-weight: 600; + border: 1px solid transparent; + white-space: nowrap; +} + +.pub-wrapper .pub-badge-open { + background-color: #f0fdf4; + color: #15803d; + border-color: #bbf7d0; +} + +.pub-wrapper .pub-badge-peer { + background-color: var(--pub-blue-light); + color: var(--pub-blue); + border-color: rgba(38, 60, 111, 0.2); +} + +.pub-wrapper .pub-badge-institutional { + background-color: #fefce8; + color: #a16207; + border-color: #fde68a; +} + +.pub-wrapper .pub-badge-request { + background-color: #eff6ff; + color: #1d4ed8; + border-color: #bfdbfe; +} + +/* Card meta row */ +.pub-wrapper .pub-card-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem 1.5rem; + font-size: 0.875rem; + color: var(--pub-muted); + margin-bottom: 1rem; +} + +.pub-wrapper .pub-card-meta .pub-meta-item { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.pub-wrapper .pub-card-meta .pub-meta-item strong { + color: var(--pub-text); + font-weight: 500; +} + +/* Card abstract */ +.pub-wrapper .pub-card-abstract { + font-size: 0.875rem; + color: var(--pub-muted); + line-height: 1.625; + margin-bottom: 1rem; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Keywords */ +.pub-wrapper .pub-keywords { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + margin-bottom: 1rem; +} + +.pub-wrapper .pub-keywords-label { + font-size: 0.75rem; + font-weight: 500; + color: var(--pub-muted); +} + +.pub-wrapper .pub-keyword-tag { + display: inline-block; + padding: 0.25rem 0.5rem; + background-color: #f3f4f6; + color: #4b5563; + border-radius: 0.25rem; + font-size: 0.75rem; +} + +/* Card actions */ +.pub-wrapper .pub-card-actions { + display: flex; + align-items: center; + gap: 0.75rem; + padding-top: 1rem; + border-top: 1px solid var(--pub-border); + flex-wrap: wrap; +} + +.pub-wrapper .pub-action-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + background: none; + border: none; + cursor: pointer; + padding: 0; + transition: color 0.2s; + text-decoration: none; +} + +.pub-wrapper .pub-action-btn-primary { + color: var(--pub-blue); +} + +.pub-wrapper .pub-action-btn-primary:hover { + color: var(--pub-blue-hover); +} + +.pub-wrapper .pub-action-btn-secondary { + color: var(--pub-muted); + margin-left: 1rem; +} + +.pub-wrapper .pub-action-btn-secondary:hover { + color: var(--pub-text); +} + +/* ============================================================ + PAGINATION + ============================================================ */ +.pub-wrapper .pub-pagination { + display: flex; + align-items: center; + justify-content: space-between; + border-top: 1px solid var(--pub-border); + padding-top: 1.5rem; + margin-top: 2rem; + gap: 1rem; +} + +.pub-wrapper .pub-page-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + border: 1px solid var(--pub-border); + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + background-color: #ffffff; + color: var(--pub-text); + cursor: pointer; + transition: border-color 0.2s, color 0.2s; +} + +.pub-wrapper .pub-page-btn:hover:not(:disabled) { + border-color: var(--pub-blue); + color: var(--pub-blue); +} + +.pub-wrapper .pub-page-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + background-color: #f9fafb; +} + +.pub-wrapper .pub-page-numbers { + display: none; + align-items: center; + gap: 0.25rem; +} + +@media (min-width: 768px) { + .pub-wrapper .pub-page-numbers { + display: flex; + } +} + +.pub-wrapper .pub-page-num { + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + background-color: #ffffff; + color: var(--pub-text); + border: none; + cursor: pointer; + transition: background-color 0.15s, color 0.15s; +} + +.pub-wrapper .pub-page-num:hover { + background-color: #f3f4f6; +} + +.pub-wrapper .pub-page-num.active { + background-color: var(--pub-blue); + color: #ffffff; + cursor: default; +} + +.pub-wrapper .pub-page-ellipsis { + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + color: var(--pub-muted); + font-size: 0.875rem; +} diff --git a/app/components/research/ProjectsAndCenters.tsx b/app/components/research/ProjectsAndCenters.tsx new file mode 100644 index 0000000..83c078d --- /dev/null +++ b/app/components/research/ProjectsAndCenters.tsx @@ -0,0 +1,208 @@ +import React from 'react'; + +// Khối chứa 2 cột: Active Projects Feed và Funding Calls +const ProjectsAndCenters = () => { + return ( +
+
+
+ + {/* --- CỘT TRÁI (7/12): ACTIVE PROJECTS LIST --- */} +
+
+

Active Projects Feed

+ + View All Projects + +
+ +
+ + {/* Project Item 1 */} +
+
+ + + +
+
+
+ Active + + + + + Updated 2d ago + +
+

Urban Microclimate Modeling

+

+ Developing high-resolution predictive models for heat island effects in European metropolitan areas using machine learning. +

+ +
+
+ Researcher + Researcher +
+3
+
+
+
+ Progress + 65% +
+
+
+
+
+
+
+
+ + {/* Project Item 2 */} +
+
+ + + +
+
+
+ Data Collection + + + + + Updated 1w ago + +
+

Digital Rights in the EU Framework

+

+ A comparative analysis of member state implementation of digital privacy directives and their impact on civil liberties. +

+ +
+
+ Researcher + Researcher +
+
+
+ Progress + 30% +
+
+
+
+
+
+
+
+ + {/* Project Item 3 */} +
+
+ + + +
+
+
+ Review + + + + + Updated 3w ago + +
+

Behavioral Impacts of Universal Basic Income

+

+ Longitudinal study tracking spending habits and employment outcomes in selected pilot regions across France. +

+ +
+
+ Researcher + Researcher + Researcher +
+
+
+ Progress + 90% +
+
+
+
+
+
+
+
+
+
+ + {/* --- CỘT PHẢI (5/12): FUNDING CALLS --- */} +
+
+

Funding Calls

+
+ +
+
+ + {/* Item 1 */} +
+ Closing Soon +

EU Horizon 2025: Sustainable Tech

+
+ + Due Nov 15 + + + Details + +
+
+ + {/* Item 2 */} +
+ Internal Grant +

Seed Funding for AI Ethics

+
+ + Due Dec 01 + + + Details + +
+
+ +
+ + +
+
+ +
+
+
+ ); +}; + +export default ProjectsAndCenters; \ No newline at end of file diff --git a/app/components/research/ResearchDomains.tsx b/app/components/research/ResearchDomains.tsx new file mode 100644 index 0000000..7c13d6c --- /dev/null +++ b/app/components/research/ResearchDomains.tsx @@ -0,0 +1,167 @@ +import React from 'react'; + +// Khối chứa danh sách các lĩnh vực nghiên cứu. +const ResearchDomains = () => { + return ( +
+
+ + {/* Tiêu đề Section */} +
+

Research Domains

+

+ Discover our core areas of expertise, where interdisciplinary teams tackle complex global challenges. +

+
+ + {/* Grid chứa các thẻ (Cards) */} +
+ + {/* Domain Card 1 (Nổi bật - Màu xanh) */} +
+ {/* Hiệu ứng Glow */} +
+ +
+ + + +
+ +

Law & Policy

+

+ Investigating the evolution of international law, human rights, and public policy in a rapidly changing geopolitical landscape. +

+ +
+ 42 Centers + + + +
+
+ + {/* Domain Card 2 */} +
+
+ + + +
+ +

Cognitive Science

+

+ Bridging psychology, neuroscience, and artificial intelligence to understand human cognition and behavior. +

+ +
+ 28 Centers + + + +
+
+ + {/* Domain Card 3 */} +
+
+ + + +
+ +

Environmental Studies

+

+ Developing sustainable solutions for climate change, resource management, and ecological preservation. +

+ +
+ 35 Centers + + + +
+
+ + {/* Domain Card 4 */} +
+
+ + + +
+ +

History & Humanities

+

+ Preserving cultural heritage and analyzing historical contexts to inform contemporary societal debates. +

+ +
+ 50 Centers + + + +
+
+ + {/* Domain Card 5 */} +
+
+ + + +
+ +

Economics

+

+ Analyzing global markets, behavioral economics, and policy impacts on socioeconomic development. +

+ +
+ 19 Centers + + + +
+
+ + {/* Domain Card 6 - CTA */} +
+
+ + + +
+

View All Domains

+

Explore our complete directory of 15+ research areas.

+
+ +
+
+
+ ); +}; + +export default ResearchDomains; \ No newline at end of file diff --git a/app/components/research/ResearchHero.tsx b/app/components/research/ResearchHero.tsx new file mode 100644 index 0000000..290ed8f --- /dev/null +++ b/app/components/research/ResearchHero.tsx @@ -0,0 +1,101 @@ +'use client'; + +import React from 'react'; +import { useRouter } from 'next/navigation'; + +const ResearchHero = () => { + const router = useRouter(); + return ( +
+
+
+ + {/* --- CỘT TRÁI --- */} +
+ + {/* Label: gạch ngang + "Research Hub" */} +
+ + Research Hub +
+ + {/* Heading */} +

+ Pioneering
+ Discovery +

+ + {/* Description */} +

+ Explore our cutting-edge research domains, active projects, and interdisciplinary centers driving innovation in liberal arts and sciences. +

+ + {/* Buttons */} +
+ + +
+
+ + {/* --- CỘT PHẢI: Visual composition --- */} +
+
+ + {/* Glow nền */} +
+ + {/* Main image card */} +
+ Research laboratory +
+
+
+ + Featured + +
+

Cognitive Sciences Lab

+

Exploring the intersection of AI and human psychology.

+
+
+ + {/* Floating stat card 1 — Publications */} +
+
+ +
+
+

12k+

+

Publications

+
+
+ + {/* Floating stat card 2 — Active Projects */} +
+
+ +
+
+

340

+

Active Projects

+
+
+ +
+
+ +
+
+
+ ); +}; + +export default ResearchHero; diff --git a/app/components/research/ResearchResources.tsx b/app/components/research/ResearchResources.tsx new file mode 100644 index 0000000..cea555a --- /dev/null +++ b/app/components/research/ResearchResources.tsx @@ -0,0 +1,68 @@ +import React from 'react'; + +// Khối chứa 2 banner: Research Guidance và Publication Repository +const ResearchResources = () => { + return ( + + ); +}; + +export default ResearchResources; \ No newline at end of file diff --git a/app/components/research/ResearchSearch.tsx b/app/components/research/ResearchSearch.tsx new file mode 100644 index 0000000..09fb4b7 --- /dev/null +++ b/app/components/research/ResearchSearch.tsx @@ -0,0 +1,115 @@ +'use client'; + +import React, { useState } from 'react'; +import { useRouter } from 'next/navigation'; + +const ResearchSearch = () => { + const [query, setQuery] = useState(''); + const [activeFilter, setActiveFilter] = useState('Researchers'); + const filters = ['Researchers', 'Labs', 'Projects', 'Institutes']; + const router = useRouter(); + + const handleSearch = () => { + const params = new URLSearchParams({ q: query, type: activeFilter }); + router.push(`/research/search?${params.toString()}`); + }; + + return ( +
+ + {/* Search bar */} +
+
+ +
+ setQuery(e.target.value)} + onKeyDown={(e) => e.key === 'Enter' && handleSearch()} + placeholder="Search across researchers, labs, projects, and disciplines..." + style={{ + width: '100%', + paddingLeft: '3rem', + paddingRight: '8rem', + paddingTop: '1rem', + paddingBottom: '1rem', + backgroundColor: '#ffffff', + border: '1px solid #e5e7eb', + borderRadius: '1rem', + boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)', + fontSize: '1rem', + color: '#374151', + outline: 'none', + transition: 'border-color 0.2s, box-shadow 0.2s', + boxSizing: 'border-box', + }} + onFocus={(e) => { + e.target.style.borderColor = '#263c6f'; + e.target.style.boxShadow = '0 0 0 2px rgba(38,60,111,0.15)'; + }} + onBlur={(e) => { + e.target.style.borderColor = '#e5e7eb'; + e.target.style.boxShadow = '0 1px 2px 0 rgba(0,0,0,0.05)'; + }} + /> +
+ +
+
+ + {/* Filter pills */} +
+ + Filters: + + {filters.map((filter) => ( + + ))} +
+ +
+ ); +}; + +export default ResearchSearch; diff --git a/app/components/research/research.css b/app/components/research/research.css new file mode 100644 index 0000000..f73db68 --- /dev/null +++ b/app/components/research/research.css @@ -0,0 +1,718 @@ +/* ============================================================ + research.css — Scoped under .research-wrapper + Matches the HTML reference design exactly. + All rules scoped to avoid conflicts with Bootstrap/main.css + ============================================================ */ + +/* --- Local CSS Variables --- */ +.research-wrapper { + --r-blue: #263c6f; + --r-blue-hover: #1d2e55; + --r-blue-light: #f0f4f8; + --r-accent: #3b82f6; + --r-border: #e5e7eb; + --r-text: #111827; + --r-muted: #6b7280; + --r-bg: #f9fafb; + --r-white: #ffffff; + --r-shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); + --r-shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); + + width: 100%; + background-color: var(--r-bg); +} + +/* ============================================================ + HERO SECTION + ============================================================ */ +.research-wrapper #research-hero { + width: 100%; + background-color: var(--r-bg); + border-bottom: 1px solid var(--r-border); + padding-top: 3rem; + padding-bottom: 4rem; + font-family: 'Inter', sans-serif; +} + +/* Label row: gạch ngang + text "Research Hub" */ +.research-wrapper #research-hero .hero-label { + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.research-wrapper #research-hero .hero-label-line { + display: block; + width: 2rem; + height: 2.5px; + background-color: var(--r-accent); + flex-shrink: 0; +} + +.research-wrapper #research-hero .hero-label-text { + font-size: 0.875rem; + font-weight: 600; + color: var(--r-blue); + text-transform: uppercase; + letter-spacing: 0.05em; + font-family: 'Inter', sans-serif; +} + +/* Heading */ +.research-wrapper #research-hero h1 { + font-family: 'Inter', sans-serif; + font-size: 3rem; + font-weight: 700; + color: var(--r-text); + letter-spacing: -0.025em; + line-height: 1.1; + margin: 0; +} + +@media (min-width: 1024px) { + .research-wrapper #research-hero h1 { + font-size: 4.5rem; + } +} + +.research-wrapper #research-hero h1 span { + color: var(--r-blue); +} + +/* Paragraph */ +.research-wrapper #research-hero .hero-desc { + font-family: 'Inter', sans-serif; + font-size: 1.125rem; + color: var(--r-muted); + line-height: 1.625; + max-width: 36rem; + margin: 0; +} + +/* Left column spacing */ +.research-wrapper #research-hero .hero-left { + display: flex; + flex-direction: column; + gap: 2rem; +} + +/* Button row */ +.research-wrapper #research-hero .hero-buttons { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +/* Hero buttons */ +.research-wrapper .r-btn-primary { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: var(--r-blue); + color: var(--r-white); + border: none; + border-radius: 9999px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s; + box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); + text-decoration: none; +} + +.research-wrapper .r-btn-primary:hover { + background-color: var(--r-blue-hover); + color: var(--r-white); +} + +.research-wrapper .r-btn-outline { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: var(--r-white); + color: var(--r-text); + border: 1px solid var(--r-border); + border-radius: 9999px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + text-decoration: none; +} + +.research-wrapper .r-btn-outline:hover { + background-color: #f9fafb; + color: var(--r-text); +} + +/* Hero floating stat cards */ +.research-wrapper .r-stat-card { + position: absolute; + background-color: var(--r-white); + border-radius: 1rem; + padding: 1rem; + border: 1px solid var(--r-border); + box-shadow: var(--r-shadow-hover); + z-index: 20; + display: flex; + align-items: center; + gap: 1rem; +} + +.research-wrapper .r-stat-card p { + margin: 0; + line-height: 1.2; +} + +/* ============================================================ + RESEARCH DOMAINS SECTION + ============================================================ */ +.research-wrapper #research-domains { + padding-top: 5rem; + padding-bottom: 5rem; + background-color: var(--r-white); +} + +.research-wrapper #research-domains h2 { + font-size: 1.875rem; + font-weight: 700; + color: var(--r-text); + margin-bottom: 1rem; +} + +@media (min-width: 1024px) { + .research-wrapper #research-domains h2 { + font-size: 2.25rem; + } +} + +.research-wrapper #research-domains > div > div:first-child p { + color: var(--r-muted); + max-width: 42rem; + margin: 0 auto; +} + +/* Domain card — folder tab shape */ +.research-wrapper .folder-tab { + clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); + padding: 2rem; + min-height: 320px; + display: flex; + flex-direction: column; + border-radius: 1.5rem; + position: relative; + overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.research-wrapper .folder-tab:hover { + transform: translateY(-4px); + box-shadow: var(--r-shadow-hover); +} + +/* Blue variant (first card) */ +.research-wrapper .folder-tab-blue { + background-color: var(--r-blue); + color: var(--r-white); +} + +.research-wrapper .folder-tab-blue h3 { + color: var(--r-white); +} + +.research-wrapper .folder-tab-blue p { + color: rgba(255,255,255,0.8); +} + +/* Light variant */ +.research-wrapper .folder-tab-light { + background-color: var(--r-blue-light); + color: var(--r-text); + border: 1px solid var(--r-border); +} + +/* CTA card (dashed border) */ +.research-wrapper .domain-card-cta { + border-radius: 1.5rem; + padding: 2rem; + min-height: 320px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + border: 2px dashed var(--r-border); + background-color: var(--r-bg); + cursor: pointer; + transition: border-color 0.2s; +} + +.research-wrapper .domain-card-cta:hover { + border-color: var(--r-blue); +} + +.research-wrapper .domain-card-cta h3 { + font-size: 1.25rem; + font-weight: 700; + color: var(--r-text); + margin-bottom: 0.5rem; +} + +.research-wrapper .domain-card-cta p { + font-size: 0.875rem; + color: var(--r-muted); + margin: 0; +} + +/* Domain card icon box */ +.research-wrapper .domain-icon-blue { + width: 3.5rem; + height: 3.5rem; + border-radius: 1rem; + background-color: rgba(255,255,255,0.2); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 2rem; + border: 1px solid rgba(255,255,255,0.3); + flex-shrink: 0; +} + +.research-wrapper .domain-icon-light { + width: 3.5rem; + height: 3.5rem; + border-radius: 1rem; + background-color: var(--r-white); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 2rem; + border: 1px solid var(--r-border); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + flex-shrink: 0; +} + +.research-wrapper .domain-card-cta .domain-icon-cta { + width: 4rem; + height: 4rem; + border-radius: 9999px; + background-color: var(--r-white); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + transition: transform 0.2s; +} + +.research-wrapper .domain-card-cta:hover .domain-icon-cta { + transform: scale(1.1); +} + +/* Domain card footer row */ +.research-wrapper .domain-card-footer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: auto; +} + +.research-wrapper .domain-badge-white { + font-size: 0.875rem; + font-weight: 500; + background-color: var(--r-white); + padding: 0.25rem 0.75rem; + border-radius: 9999px; + border: 1px solid var(--r-border); + color: var(--r-blue); +} + +.research-wrapper .domain-badge-glass { + font-size: 0.875rem; + font-weight: 500; + background-color: rgba(255,255,255,0.2); + padding: 0.25rem 0.75rem; + border-radius: 9999px; + color: var(--r-white); +} + +/* ============================================================ + PROJECTS & CENTERS SECTION + ============================================================ */ +.research-wrapper #projects-centers { + padding-top: 5rem; + padding-bottom: 5rem; + background-color: var(--r-bg); + border-top: 1px solid var(--r-border); + border-bottom: 1px solid var(--r-border); +} + +.research-wrapper #projects-centers h2 { + font-size: 1.5rem; + font-weight: 700; + color: var(--r-text); + margin: 0; +} + +/* Project item card */ +.research-wrapper .project-card { + background-color: var(--r-white); + border-radius: 1.25rem; + padding: 1.5rem; + border: 1px solid var(--r-border); + box-shadow: var(--r-shadow-soft); + display: flex; + flex-direction: column; + gap: 1.5rem; + align-items: flex-start; + transition: box-shadow 0.25s ease; +} + +.research-wrapper .project-card:hover { + box-shadow: var(--r-shadow-hover); +} + +@media (min-width: 640px) { + .research-wrapper .project-card { + flex-direction: row; + align-items: center; + } +} + +.research-wrapper .project-icon { + width: 4rem; + height: 4rem; + border-radius: 0.75rem; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border: 1px solid var(--r-border); +} + +.research-wrapper .project-icon-blue { background-color: var(--r-blue-light); border-color: var(--r-border); } +.research-wrapper .project-icon-purple { background-color: #faf5ff; border-color: #e9d5ff; } +.research-wrapper .project-icon-orange { background-color: #fff7ed; border-color: #fed7aa; } + +/* Status badges */ +.research-wrapper .badge { + display: inline-flex; + align-items: center; + padding: 0.25rem 0.625rem; + border-radius: 0.375rem; + font-size: 0.75rem; + font-weight: 600; + border: 1px solid transparent; +} + +.research-wrapper .badge-active { background-color: #f0fdf4; color: #15803d; border-color: #bbf7d0; } +.research-wrapper .badge-collection { background-color: #fefce8; color: #a16207; border-color: #fde68a; } +.research-wrapper .badge-review { background-color: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } + +/* Progress bar */ +.research-wrapper .progress-bar-track { + width: 8rem; + background-color: var(--r-bg); + border-radius: 9999px; + height: 0.375rem; +} + +.research-wrapper .progress-bar-fill { + height: 0.375rem; + border-radius: 9999px; +} + +.research-wrapper .progress-fill-blue { background-color: var(--r-blue); } +.research-wrapper .progress-fill-accent { background-color: var(--r-accent); } + +/* ============================================================ + FUNDING CALLS (right column) + ============================================================ */ +.research-wrapper .funding-card { + background-color: var(--r-white); + border-radius: 1.5rem; + padding: 1.5rem; + border: 1px solid var(--r-border); + box-shadow: var(--r-shadow-soft); + display: flex; + flex-direction: column; + transition: box-shadow 0.25s ease; +} + +.research-wrapper .funding-card:hover { + box-shadow: var(--r-shadow-hover); +} + +.research-wrapper .funding-item { + padding: 1.25rem; + background-color: var(--r-bg); + border-radius: 1rem; + border: 1px solid var(--r-border); + transition: border-color 0.2s; +} + +.research-wrapper .funding-item:hover { + border-color: var(--r-accent); +} + +.research-wrapper .funding-item h4 { + font-size: 1rem; + font-weight: 700; + color: var(--r-text); + margin: 0 0 0.75rem 0; +} + +.research-wrapper .funding-label-urgent { + font-size: 0.625rem; + font-weight: 700; + color: #ef4444; + text-transform: uppercase; + letter-spacing: 0.05em; + display: block; + margin-bottom: 0.5rem; +} + +.research-wrapper .funding-label-internal { + font-size: 0.625rem; + font-weight: 700; + color: var(--r-blue); + text-transform: uppercase; + letter-spacing: 0.05em; + display: block; + margin-bottom: 0.5rem; +} + +.research-wrapper .funding-meta { + display: flex; + justify-content: space-between; + align-items: center; +} + +.research-wrapper .funding-due { + font-size: 0.75rem; + color: var(--r-muted); + font-weight: 500; + display: inline-flex; + align-items: center; + gap: 0.375rem; +} + +.research-wrapper .funding-link { + font-size: 0.75rem; + font-weight: 600; + color: var(--r-blue); + display: inline-flex; + align-items: center; + gap: 0.25rem; + text-decoration: none; + transition: color 0.15s; +} + +.research-wrapper .funding-link:hover { + color: var(--r-blue-hover); +} + +.research-wrapper .funding-view-all { + width: 100%; + margin-top: 1.5rem; + padding: 0.75rem; + border-radius: 0.75rem; + border: 1px solid var(--r-border); + font-size: 0.875rem; + font-weight: 600; + color: var(--r-text); + background-color: var(--r-white); + cursor: pointer; + transition: border-color 0.2s, color 0.2s; + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); +} + +.research-wrapper .funding-view-all:hover { + border-color: var(--r-blue); + color: var(--r-blue); +} + +/* ============================================================ + RESEARCH RESOURCES (Quick Links) + ============================================================ */ +.research-wrapper #research-quick-links { + padding-top: 5rem; + padding-bottom: 5rem; + background-color: var(--r-white); +} + +.research-wrapper .resource-card { + display: block; + background-color: var(--r-bg); + border-radius: 1.5rem; + padding: 2rem; + border: 1px solid var(--r-border); + position: relative; + overflow: hidden; + text-decoration: none; + transition: border-color 0.2s; +} + +.research-wrapper .resource-card:hover { + border-color: var(--r-accent); +} + +.research-wrapper .resource-card-glow { + position: absolute; + right: 0; + top: 0; + width: 16rem; + height: 16rem; + background-color: var(--r-blue-light); + border-radius: 9999px; + filter: blur(64px); + opacity: 0.5; + transform: translateY(-50%) translateX(25%); + transition: opacity 0.3s; + pointer-events: none; +} + +.research-wrapper .resource-card:hover .resource-card-glow { + opacity: 0.8; +} + +.research-wrapper .resource-icon { + width: 4rem; + height: 4rem; + border-radius: 1rem; + background-color: var(--r-white); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); + border: 1px solid var(--r-border); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: transform 0.2s; +} + +.research-wrapper .resource-card:hover .resource-icon { + transform: scale(1.05); +} + +.research-wrapper .resource-card h3 { + font-size: 1.5rem; + font-weight: 700; + color: var(--r-text); + margin-bottom: 0.5rem; + transition: color 0.2s; +} + +.research-wrapper .resource-card:hover h3 { + color: var(--r-blue); +} + +.research-wrapper .resource-card p { + color: var(--r-muted); + line-height: 1.625; + margin-bottom: 1rem; +} + +.research-wrapper .resource-link { + display: inline-flex; + align-items: center; + font-size: 0.875rem; + font-weight: 600; + color: var(--r-blue); + gap: 0.5rem; +} + +/* ============================================================ + COLLABORATION CTA SECTION + ============================================================ */ +.research-wrapper #collaboration-cta { + padding-top: 6rem; + padding-bottom: 6rem; + background-color: var(--r-blue); + position: relative; + overflow: hidden; +} + +.research-wrapper #collaboration-cta h2 { + font-size: 2.25rem; + font-weight: 700; + color: var(--r-white); + letter-spacing: -0.025em; + margin-bottom: 1.5rem; +} + +@media (min-width: 768px) { + .research-wrapper #collaboration-cta h2 { font-size: 3rem; } +} + +@media (min-width: 1024px) { + .research-wrapper #collaboration-cta h2 { font-size: 3.75rem; } +} + +.research-wrapper #collaboration-cta p { + font-size: 1.25rem; + color: var(--r-blue-light); + opacity: 0.9; + line-height: 1.625; + max-width: 42rem; + margin: 0 auto 2.5rem; + font-weight: 300; +} + +.research-wrapper .cta-btn-white { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: var(--r-white); + color: var(--r-blue); + border: none; + border-radius: 0.75rem; + font-size: 1rem; + font-weight: 700; + cursor: pointer; + transition: background-color 0.2s; + box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); + text-decoration: none; + width: 100%; +} + +@media (min-width: 640px) { + .research-wrapper .cta-btn-white { width: auto; } +} + +.research-wrapper .cta-btn-white:hover { + background-color: #f9fafb; + color: var(--r-blue); +} + +.research-wrapper .cta-btn-ghost { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + background-color: transparent; + color: var(--r-white); + border: 2px solid rgba(255,255,255,0.3); + border-radius: 0.75rem; + font-size: 1rem; + font-weight: 700; + cursor: pointer; + transition: background-color 0.2s; + text-decoration: none; + width: 100%; +} + +@media (min-width: 640px) { + .research-wrapper .cta-btn-ghost { width: auto; } +} + +.research-wrapper .cta-btn-ghost:hover { + background-color: rgba(255,255,255,0.1); + color: var(--r-white); +} diff --git a/app/components/research/search/ResearchSearchHeader.tsx b/app/components/research/search/ResearchSearchHeader.tsx new file mode 100644 index 0000000..80ec3d7 --- /dev/null +++ b/app/components/research/search/ResearchSearchHeader.tsx @@ -0,0 +1,79 @@ +'use client'; + +import React, { useState } from 'react'; +import { useRouter } from 'next/navigation'; + +const FILTERS = ['Researchers', 'Labs', 'Projects', 'Institutes']; + +const ResearchSearchHeader = () => { + const [query, setQuery] = useState(''); + const [activeFilter, setActiveFilter] = useState('Researchers'); + const router = useRouter(); + + const handleSearch = () => { + const params = new URLSearchParams({ q: query, type: activeFilter }); + router.push(`/research/search?${params.toString()}`); + }; + + return ( +
+
+ + {/* Title row */} +
+
+

Research Search

+

Search across researchers, labs, active projects, and institutes.

+
+
+ +
+
+ + {/* Search bar */} +
+ + + + setQuery(e.target.value)} + onKeyDown={(e) => e.key === 'Enter' && handleSearch()} + /> +
+ +
+
+ + {/* Filter tabs */} +
+ + Filter by: + + {FILTERS.map((f) => ( + + ))} +
+ +
+
+ ); +}; + +export default ResearchSearchHeader; diff --git a/app/components/research/search/ResearchSearchResults.tsx b/app/components/research/search/ResearchSearchResults.tsx new file mode 100644 index 0000000..d4460a8 --- /dev/null +++ b/app/components/research/search/ResearchSearchResults.tsx @@ -0,0 +1,177 @@ +'use client'; + +import React, { useState } from 'react'; + +const SORT_OPTIONS = ['Relevance', 'Newest First', 'Most Active', 'Alphabetical']; + +const RESULTS = [ + { + type: 'Project', + badgeClass: 'pub-badge-open', + badgeIcon: 'fa-flask', + badgeLabel: 'Active Project', + statusClass: 'pub-badge-peer', + statusLabel: 'Environmental Studies', + title: 'Urban Microclimate Modeling', + lead: 'Dr. Alan Turing', + updated: 'Updated 2 days ago', + center: 'Institute for Climate Research', + desc: 'Developing high-resolution predictive models for heat island effects in European metropolitan areas using machine learning and satellite data.', + tags: ['Climate', 'Machine Learning', 'Urban Studies'], + progress: 65, + }, + { + type: 'Lab', + badgeClass: 'pub-badge-institutional', + badgeIcon: 'fa-building-user', + badgeLabel: 'Research Lab', + statusClass: 'pub-badge-peer', + statusLabel: 'Cognitive Science', + title: 'Cognitive Sciences Lab', + lead: 'Prof. Marie Curie', + updated: 'Updated 1 week ago', + center: 'Center for Digital Humanities', + desc: 'Exploring the intersection of artificial intelligence and human psychology, with a focus on decision-making processes and behavioral modeling.', + tags: ['AI', 'Psychology', 'Neuroscience'], + progress: null, + }, + { + type: 'Project', + badgeClass: 'pub-badge-request', + badgeIcon: 'fa-gavel', + badgeLabel: 'Data Collection', + statusClass: 'pub-badge-peer', + statusLabel: 'Law & Policy', + title: 'Digital Rights in the EU Framework', + lead: 'Dr. Elena Rostova', + updated: 'Updated 1 week ago', + center: 'Institute for Advanced European Studies', + desc: 'A comparative analysis of member state implementation of digital privacy directives and their impact on civil liberties across the EU.', + tags: ['Digital Rights', 'EU Law', 'Privacy'], + progress: 30, + }, +]; + +const ResearchSearchResults = () => { + const [isSortOpen, setIsSortOpen] = useState(false); + const [selectedSort, setSelectedSort] = useState('Relevance'); + + return ( +
+ + {/* Toolbar */} +
+

+ Showing 1–10 of 340 results +

+
+ +
+ + {isSortOpen && ( +
+ {SORT_OPTIONS.map((opt) => ( +
{ setSelectedSort(opt); setIsSortOpen(false); }} + > + {opt} +
+ ))} +
+ )} +
+
+
+ + {/* Result cards */} +
+ {RESULTS.map((item, idx) => ( +
+
+

+ {item.title} +

+
+ + {item.badgeLabel} + + {item.statusLabel} +
+
+ +
+
+ + {item.lead} +
+
+ {item.updated} +
+
+ {item.center} +
+
+ +

{item.desc}

+ +
+ Tags: + {item.tags.map((tag) => ( + {tag} + ))} +
+ + {item.progress !== null && ( +
+
+ Progress + {item.progress}% +
+
+
+
+
+ )} + +
+ + +
+
+ ))} +
+ + {/* Pagination */} +
+ +
+ + + + ... + +
+ +
+ +
+ ); +}; + +export default ResearchSearchResults; diff --git a/app/components/research/search/ResearchSearchSidebar.tsx b/app/components/research/search/ResearchSearchSidebar.tsx new file mode 100644 index 0000000..cc961c9 --- /dev/null +++ b/app/components/research/search/ResearchSearchSidebar.tsx @@ -0,0 +1,94 @@ +'use client'; + +import React, { useState } from 'react'; + +const DOMAINS = ['Law & Policy (42)', 'Cognitive Science (28)', 'Environmental Studies (35)', 'History & Humanities (50)', 'Economics (19)']; +const STATUSES = ['Active', 'Data Collection', 'Review', 'Completed']; +const TYPES = ['Researchers', 'Labs', 'Projects', 'Institutes']; + +const AccordionSection = ({ + title, + open, + onToggle, + children, +}: { + title: string; + open: boolean; + onToggle: () => void; + children: React.ReactNode; +}) => ( +
+ +
+ {children} +
+
+); + +const ResearchSearchSidebar = () => { + const [isDomainOpen, setIsDomainOpen] = useState(true); + const [isStatusOpen, setIsStatusOpen] = useState(true); + const [isTypeOpen, setIsTypeOpen] = useState(true); + + return ( + + ); +}; + +export default ResearchSearchSidebar; diff --git a/app/globals.css b/app/globals.css index 41413ec..2868526 100644 --- a/app/globals.css +++ b/app/globals.css @@ -3,13 +3,20 @@ @import "./components/layout/Header/header-responsive.css"; @import "./components/home/home.css"; @import "./components/about/about.css"; - +@import "./components/research/research.css"; +@import "./components/publications/publications.css"; @theme { --color-brand-blue: #1b254b; + --color-brand-light: #f8fbff; + --color-ui-muted: #6b7280; --color-ui-border: #e5e7eb; --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + + --shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); + + --shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); } @layer components { @@ -17,11 +24,3 @@ @apply border border-[--color-ui-border] bg-white; } } - -.collapse { - visibility: visible !important; -} - -.collapse.show { - visibility: visible; -} diff --git a/app/layout.tsx b/app/layout.tsx index 547fd3f..eaffd84 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,4 @@ import type { Metadata } from "next"; -import "./globals.css"; import Header from "./components/layout/Header/Header"; import Footer from "./components/layout/Footer/Footer"; @@ -12,6 +11,7 @@ export const metadata: Metadata = { title: "H.A.I Learning", description: "H.A.I Learning", }; +import "./globals.css"; export default function RootLayout({ children, diff --git a/app/publications/page.tsx b/app/publications/page.tsx new file mode 100644 index 0000000..0e54db4 --- /dev/null +++ b/app/publications/page.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import PublicationHeader from '@/app/components/publications/PublicationHeader'; +import PublicationSidebar from '@/app/components/publications/PublicationSidebar'; +import PublicationResults from '@/app/components/publications/PublicationResults'; + +export default function PublicationsPage() { + return ( +
+ +
+
+
+ + +
+
+
+
+ ); +} diff --git a/app/research/page.tsx b/app/research/page.tsx new file mode 100644 index 0000000..5fdf105 --- /dev/null +++ b/app/research/page.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Metadata } from 'next'; +import ResearchHero from '@/app/components/research/ResearchHero'; +import ResearchSearch from '@/app/components/research/ResearchSearch'; +import ResearchDomains from '@/app/components/research/ResearchDomains'; +import ProjectsAndCenters from '@/app/components/research/ProjectsAndCenters'; +import ResearchResources from '@/app/components/research/ResearchResources'; + +export const metadata: Metadata = { + title: 'Research Hub | Liberal University', + description: 'Explore our cutting-edge research domains, active projects, and funding calls.', +}; + +export default function ResearchPage() { + return ( +
+ + + + + +
+ ); +} diff --git a/app/research/search/page.tsx b/app/research/search/page.tsx new file mode 100644 index 0000000..8344233 --- /dev/null +++ b/app/research/search/page.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Metadata } from 'next'; +import ResearchSearchHeader from '@/app/components/research/search/ResearchSearchHeader'; +import ResearchSearchSidebar from '@/app/components/research/search/ResearchSearchSidebar'; +import ResearchSearchResults from '@/app/components/research/search/ResearchSearchResults'; + +export const metadata: Metadata = { + title: 'Search Research | Liberal University', + description: 'Search across researchers, labs, projects, and institutes.', +}; + +export default function ResearchSearchPage() { + return ( +
+ +
+
+
+ + +
+
+
+
+ ); +} diff --git a/package.json b/package.json index 735f72e..b434911 100644 --- a/package.json +++ b/package.json @@ -13,18 +13,19 @@ "dependencies": { "axios": "^1.13.4", "next": "16.1.6", + "postcss": "^8.5.9", "react": "19.2.3", "react-dom": "19.2.3" }, "devDependencies": { - "@tailwindcss/postcss": "^4", + "@tailwindcss/postcss": "^4.2.2", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "16.1.6", "sass": "^1.98.0", - "tailwindcss": "^4", + "tailwindcss": "^4.2.2", "typescript": "^5" } } diff --git a/public/assets/css/main.css b/public/assets/css/main.css index d07a37e..d286402 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -147,7 +147,7 @@ input { color: var(--white); } -h1, +/* h1, h2, h3, h4, @@ -158,7 +158,7 @@ h6 { padding: 0; color: var(--header); transition: all 0.4s ease-in-out; -} +} */ h1 { font-size: 72px; diff --git a/public/assets/scss/_about.scss b/public/assets/scss/_about.scss deleted file mode 100644 index f5745b9..0000000 --- a/public/assets/scss/_about.scss +++ /dev/null @@ -1,280 +0,0 @@ -.about-wrapper { - - .about-image { - max-width: 375px; - position: relative; - z-index: 9; - - @include breakpoint (max-xxl) { - max-width: initial; - } - - img { - @include imgw; - border-radius: 16px; - } - - .about-image-2 { - position: absolute; - bottom: -170px; - right: -238px; - - @include breakpoint (max-xxl) { - max-width: 250px; - right: 0; - bottom: 0; - } - } - - .bg-shape { - position: absolute; - z-index: -1; - top: 0; - left: 0; - right: 0; - - @include breakpoint (max-xxl) { - display: none; - } - - img { - width: initial; - height: initial; - } - } - - .plane-shape { - position: absolute; - left: -38px; - bottom: -163px; - z-index: -1; - - @include breakpoint (max-xxl) { - display: none; - } - - img { - width: initial; - height: initial; - } - } - - .top-shape { - position: absolute; - right: -200px; - top: 0; - - @include breakpoint (max-xxl) { - display: none; - } - - img { - width: initial; - height: initial; - } - } - } - - .about-content { - .text { - margin-top: 24px; - padding-left: 40px; - border-left: 3px solid $border-color-2; - margin-bottom: 30px; - - @include breakpoint (max-xxl) { - border-left: none; - padding-left: 0; - } - } - - .about-item { - @include flex; - justify-content: space-between; - border-top: 1px solid rgba(203, 204, 207, 0.24); - padding-top: 24px; - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 30px; - } - - .content { - span { - font-size: 20px; - font-weight: 500; - color: $header-color; - display: inline-block; - margin-bottom: 5px; - - img { - margin-right: 8px; - } - } - } - } - - .list { - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding: 24px 0 32px; - margin-bottom: 48px; - - @include breakpoint (max-xxl) { - margin-bottom: 30px; - padding: 24px 0 30px; - } - - li { - &:not(:last-child) { - margin-bottom: 10px; - } - - @include breakpoint (max-xxl) { - font-size: 14px; - } - - i { - color: $theme-color-2; - margin-right: 8px; - } - } - } - } -} - -.about-section { - position: relative; - z-index: 9; - - .top-shape { - position: absolute; - right: 0; - top: -50px; - z-index: -1; - - @include breakpoint (max-xxl) { - display: none; - } - } -} - -.about-wrapper-3 { - - .about-content { - .text { - margin-top: 20px; - max-width: 616px; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 24px; - margin-bottom: 30px; - } - - .about-list-item { - display: flex; - gap: 32px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 25px; - } - - .loading-box { - height: 256px; - width: 214px; - border-radius: 16px; - position: relative; - text-align: center; - - .loading-boxs { - height: 200px; - width: 200px; - display: flex; - align-items: center; - justify-content: center; - background: #0a4ebd; - border-radius: 16px; - - .circle-bar { - position: relative; - - strong { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 28px; - font-weight: bold; - color: $white; - } - } - } - - h6 { - color: $white; - font-weight: 500; - font-size: 14px; - } - } - - .list-item { - - .list { - margin-bottom: 48px; - - li { - font-size: 18px; - font-weight: 500; - color: $header-color; - font-family: $heading-font; - - @include breakpoint (max-xxl) { - font-size: 16px; - } - - &:not(:last-child) { - margin-bottom: 15px; - } - - i { - margin-right: 8px; - color: $theme-color-2; - } - } - } - } - } - } - - .about-image { - img { - @include imgw; - border-radius: 8px; - } - - &.tp-clip-anim { - width: 100%; - display: grid; - align-items: center; - justify-items: center; - overflow: hidden; - position: relative; - & .tp-anim-img { - opacity: 0; - width: 100%; - height: 100%; - } - - & .mask { - background-size: cover; - background-position: center; - transform: scale(1.005); - } - >* { - grid-area: 1 / 1 / 2 / 2; - width: 100%; - height: 100%; - max-height: 100%; - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/_animation.scss b/public/assets/scss/_animation.scss deleted file mode 100644 index 538c28f..0000000 --- a/public/assets/scss/_animation.scss +++ /dev/null @@ -1,915 +0,0 @@ - -//>>>>> Video Animation Start <<<<>>>> Video Animation End <<<<>>>> Circle Animation Start <<<<>>>> Circle Animation End <<<<>>>> Preloader Animation Start <<<<>>>> Preloader Animation Start <<<<>>>> Preloader Animation End <<<<* { - grid-area: 1 / 1 / 2 / 2; - width: 100%; - height: 100%; - max-height: 100%; - } - } - } - - .feature-content { - margin-left: 30px; - - @include breakpoint (max-lg) { - margin-left: 0; - } - - .text { - margin-top: 24px; - } - - .feature-count { - @include flex; - gap: 24px; - border-top: 1px solid rgba(203, 204, 207, 0.24); - margin-top: 24px; - padding-top: 24px; - margin-bottom: 48px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - margin-bottom: 30px; - } - - .content { - - .count-image { - img { - @include imgw; - } - } - - h5 { - font-weight: 500; - } - } - - .list { - li { - font-size: 18px; - font-weight: 500; - color: $header-color; - font-family: $heading-font; - - @include breakpoint (max-xxl) { - font-size: 16px; - } - - &:not(:last-child) { - margin-bottom: 15px; - } - - i { - margin-right: 8px; - color: $theme-color-2; - } - } - } - } - } -} - -.choose-us-wrapper-2 { - - .choose-us-image { - margin-right: 40px; - - img { - @include imgw; - } - - &.tp-clip-anim { - width: 100%; - display: grid; - align-items: center; - justify-items: center; - overflow: hidden; - position: relative; - & .tp-anim-img { - opacity: 0; - width: 100%; - height: 100%; - } - - & .mask { - background-size: cover; - background-position: center; - transform: scale(1.005); - } - >* { - grid-area: 1 / 1 / 2 / 2; - width: 100%; - height: 100%; - max-height: 100%; - } - } - } - - .feature-content { - margin-right: 20px; - - @include breakpoint (max-xxl) { - margin-right: 0; - } - - .text { - margin-top: 24px; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 16px; - margin-bottom: 8px; - } - - .choose-us-box { - @include flex; - gap: 16px; - padding: 16px 24px; - border: 1px solid $white; - @include transition; - border-radius: 12px; - margin-top: 24px; - background-color: $white; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - } - - .icon { - width: 80px; - height: 80px; - line-height: 80px; - text-align: center; - border-radius: 100px; - background-color: $bg-color; - } - - .content { - h5 { - margin-bottom: 5px; - } - - p { - max-width: 500px; - } - } - - &:hover { - border: 1px solid $theme-color; - } - } - - .theme-btn { - margin-top: 48px; - } - } -} - -.destination-offer-wrapper-3 { - margin-top: 60px; - - @include breakpoint (max-sm) { - margin-top: 30px; - } - - .destination-offer-item { - border-radius: 16px; - - .choose-us-image { - img { - @include imgw; - border-top-left-radius: 16px; - border-top-right-radius: 16px; - } - } - - .choose-us-content { - padding: 16px 17px 24px; - background-color: $bg-color; - - .icon-item { - @include flex; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - gap: 12px; - padding-bottom: 12px; - margin-bottom: 10px; - - h5 { - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - } - } - } -} - -.destination-offer-section { - position: relative; - z-index: 9; - - .bg-image { - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: -1; - - &::before { - @include before; - background: rgb(4 4 5 / 87%); - } - } -} - -.choose-us-wrapper-3 { - - .choose-us-left-item { - @include flex; - gap: 0; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 30px; - } - - .left-item { - .choose-us-image { - img { - @include breakpoint (max-xxl) { - @include imgw; - } - } - } - - .caller-item { - @include flex; - gap: 12px; - padding: 21px 45px; - background-color: $header-color; - width: 311px; - border-bottom-left-radius: 100px; - margin-top: 30px; - - .icon { - width: 48px; - height: 48px; - line-height: 48px; - border-radius: 100px; - text-align: center; - background-color: $white; - color: $theme-color; - } - - .content { - span { - opacity: 0.8; - color: $white; - } - - h5 { - a { - color: $theme-color; - } - } - } - } - } - - .right-item { - .count-box { - padding: 20px 24px; - background-color: $theme-color-2; - border-top-right-radius: 100px; - @include flex; - gap: 4px; - width: 308px; - margin-bottom: 30px; - margin-left: -24px; - - @include breakpoint (max-xxl) { - margin-left: 0; - } - - h2 { - color: $white; - } - - h5 { - color: $white; - } - } - - .choose-image { - img { - @include breakpoint (max-xxl) { - @include imgw; - } - } - } - } - } - - .choose-us-content { - - .text { - margin-top: 20px; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 24px; - margin-bottom: 24px; - } - - .nav { - display: flex; - gap: 30px; - margin-bottom: 30px; - - li { - font-size: 20px; - font-weight: 500; - - @include breakpoint (max-xl) { - font-size: 16px; - } - - .nav-link{ - color: $header-color; - @include transition; - padding: 16px 32px; - border-radius: 100px; - line-height: 1; - border: 1px solid rgba(203, 204, 207, 0.24); - - &.active { - position: relative; - background-color: $theme-color-2; - color: $white; - } - } - } - } - - .content { - margin-top: 16px; - - .list-item { - @include flex; - gap: 50px; - margin-top: 20px; - margin-bottom: 50px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 10px; - margin-bottom: 30px; - } - - .list { - li { - font-size: 18px; - font-weight: 500; - color: $header-color; - font-family: $heading-font; - - @include breakpoint (max-xxl) { - font-size: 16px; - } - - &:not(:last-child) { - margin-bottom: 10px; - } - - i { - margin-right: 10px; - } - } - } - } - } - } -} - -.intro-image { - margin-top: 30px; - border-radius: 24px; - - img { - @include imgw; - border-radius: 24px; - } - - &.tp-clip-anim { - width: 100%; - display: grid; - align-items: center; - justify-items: center; - overflow: hidden; - position: relative; - & .tp-anim-img { - opacity: 0; - width: 100%; - height: 100%; - } - - & .mask { - background-size: cover; - background-position: center; - transform: scale(1.005); - } - >* { - grid-area: 1 / 1 / 2 / 2; - width: 100%; - height: 100%; - max-height: 100%; - } - } -} - -.appointment-wrapper { - - .appointment-content { - h5 { - margin-top: 80px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - } - } - } - - .calendar { - background: #f9f9f9; - padding: 20px; - border-radius: 15px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - width: 640px; - - @include breakpoint (max-xxl) { - width: initial; - overflow-x: scroll; - } - - .calendar-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; - - h2 { - margin: 0; - font-size: 18px; - font-weight: 600; - } - - button { - background: $theme-color-2; - color: $white; - border: none; - border-radius: 50%; - width: 30px; - height: 30px; - cursor: pointer; - font-size: 16px; - } - } - - .days { - display: grid; - grid-template-columns: repeat(7, 1fr); - text-align: center; - font-weight: 700; - color: $header-color; - margin-bottom: 10px; - } - - .dates { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 5px; - text-align: center; - - div { - width: 70px; - height: 70px; - line-height: 70px; - border-radius: 50%; - background: $white; - font-size: 20px; - font-weight: 700; - - @include breakpoint (max-xxl) { - width: 50px; - height: 50px; - line-height: 50px; - font-size: 16px; - } - } - - .highlight { - background: $theme-color-2 !important; - color: $white; - font-weight: bold; - } - - div.active-date { - background: $theme-color-2; - color: $white; - font-weight: bold; - } - } - } -} - -.cooming-soon-content { - text-align: center; - - h2 { - margin-top: 24px; - margin-bottom: 20px; - } - - p { - max-width: 744px; - margin: 0 auto; - } - - form { - max-width: 664px; - width: 100%; - text-align: center; - margin: 0 auto; - } - - .form-clt { - position: relative; - margin-top: 48px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - } - - input { - width: 100%; - outline: none; - border: none; - background-color: $bg-color; - color: $text-color; - line-height: 1; - padding: 25px 0px 25px 25px; - border-radius: 100px; - max-width: 664px; - - @include breakpoint (max-xxl) { - padding: 20px 0px 20px 10px; - font-size: 14px; - } - - @include breakpoint (max-lg) { - padding: 20px 0px 20px 10px; - font-size: 14px; - } - - @include breakpoint (max-sm) { - font-size: 14px; - } - - &::placeholder { - color: $text-color; - } - } - - .theme-btn { - position: absolute; - top: 4px; - right: 4px; - bottom: 4px; - text-transform: uppercase; - border: 1px solid rgba(203, 204, 207, 0.24); - background-color: $bg-color; - - @include breakpoint (max-xxl){ - right: 0; - top: 0; - bottom: 0; - padding: 2px 4px 2px 12px; - font-size: 14px; - - i { - margin-left: 10px; - } - } - - &:hover { - color: $white; - background-color: $theme-color; - } - } - } - - .social-icon { - @include flex; - gap: 12px; - justify-content: center; - margin-top: 40px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - } - - a { - width: 44px; - height: 44px; - line-height: 44px; - text-align: center; - border-radius: 100px; - background-color: $bg-color; - color: $header-color; - display: inline-block; - - &:hover { - background-color: $theme-color; - color: $white; - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/_footer.scss b/public/assets/scss/_footer.scss deleted file mode 100644 index d73f4a0..0000000 --- a/public/assets/scss/_footer.scss +++ /dev/null @@ -1,683 +0,0 @@ - -.footer-wrapper { - - .footer-item { - padding: 100px 0; - position: relative; - text-align: center; - - @include breakpoint (max-lg) { - padding: 80px 0; - } - - h2 { - font-size: 30px; - color: $white; - - @include breakpoint (max-sm) { - font-size: 25px; - } - - a { - color: $white; - } - - &.text { - font-size: 24px; - } - } - - .footer-list-item { - @include flex; - justify-content: space-between; - border-radius: 136px; - background: rgba(255, 255, 255, 0.08); - backdrop-filter: blur(62px); - padding: 20px 24px; - margin-top: 80px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - padding: 20px; - } - - @include breakpoint (max-lg) { - border-radius: 0; - flex-wrap: wrap; - gap: 20px; - } - - .footer-list { - @include flex; - gap: 40px; - - @include breakpoint (max-xxl) { - gap: 20px; - } - - @include breakpoint (max-sm) { - flex-wrap: wrap; - gap: 15px; - } - - li { - font-weight: 500; - font-family: $heading-font; - text-transform: uppercase; - - a { - color: $white; - - &:hover { - color: $theme-color; - } - } - } - } - - .social-icon { - @include flex; - gap: 12px; - - a { - width: 40px; - height: 40px; - line-height: 40px; - text-align: center; - border-radius: 100px; - backdrop-filter: blur(46px); - background-color: $bg-color-2; - color: $white; - display: inline-block; - - &:hover { - background-color: $theme-color; - } - } - } - } - } -} - - -.footer-section { - margin: 0 30px; - border-radius: 32px; - - @include breakpoint (max-sm) { - margin: 0 15px; - } -} - -.footer-bottom { - padding: 24px 0; - text-align: center; - - .footer-wrapper { - @include flex; - justify-content: center; - gap: 100px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - @include breakpoint (max-sm) { - justify-content: start; - } - - p { - color: $header-color; - - span { - color: $theme-color; - text-transform: uppercase; - } - } - - .bottom-list { - @include flex; - gap: 40px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - @include breakpoint (max-sm) { - justify-content: center; - } - - li { - a { - &:hover { - color: $theme-color; - } - } - } - } - } -} - -.footer-widget-wrapper-2 { - padding: 70px 0 90px; - - @include breakpoint (max-lg) { - padding: 50px 0 80px; - } - - .single-footer-widget { - margin-top: 30px; - - .widget-title { - margin-bottom: 24px; - - h3 { - color: $white; - text-transform: uppercase; - } - } - - .footer-content { - p { - max-width: 502px; - color: rgba(255, 255, 255, 0.7); - - @include breakpoint (max-xxl) { - font-size: 14px; - } - - @include breakpoint (max-lg) { - font-size: 16px; - } - } - - .social-icon { - @include flex; - gap: 20px; - margin-top: 50px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - gap: 13px; - } - - @include breakpoint (max-lg) { - gap: 16px; - } - - span { - display: inline-block; - margin-right: 4px; - color: $white; - font-weight: 500; - text-transform: uppercase; - font-family: $heading-font; - - @include breakpoint (max-xxl) { - font-size: 14px; - } - - @include breakpoint (max-lg) { - font-size: 16px; - } - } - - a { - font-size: 20px; - color: $theme-color; - - &:hover { - color: $theme-color-2; - } - } - } - } - - .list { - li { - @include transition; - font-weight: 400; - - &:not(:last-child){ - margin-bottom: 20px; - } - - a { - color: rgba(255, 255, 255, 0.7); - } - - &:hover { - margin-left: 5px; - - a { - color: $theme-color; - } - } - } - } - - .contact-item { - li { - display: flex; - align-items: start; - color: rgba(255, 255, 255, 0.7); - gap: 8px; - - &.style-2 { - @include flex; - } - - &:not(:last-child) { - margin-bottom: 20px; - } - - a { - color: rgba(255, 255, 255, 0.7); - } - - i { - color: $theme-color; - } - } - } - } -} - -.footer-section-2 { - position: relative; - z-index: 9; - - .shape { - position: absolute; - left: 0; - top: 0; - z-index: -1; - } -} - -.footer-newsletter { - @include flex; - justify-content: space-between; - margin-top: 100px; - padding: 32px 48px; - background-color: $theme-color-2; - border-radius: 16px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - padding: 30px; - margin-top: 80px; - } - - .newsletter-content { - h3 { - color: $white; - } - - p { - color: rgba(255, 255, 255, 0.7); - } - } - - form { - max-width: 587px; - width: 100%; - } - - .form-clt { - position: relative; - - .input-icon { - top: 50%; - left: 25px; - transform: translateY(-50%); - position: absolute; - - @include breakpoint (max-sm) { - top: 23%; - } - } - - input { - width: 100%; - outline: none; - border: none; - background-color: $white; - color: $text-color; - line-height: 1; - padding: 25px 0px 25px 60px; - border-radius: 100px; - max-width: 587px; - - @include breakpoint (max-lg) { - padding: 20px 0px 20px 60px; - } - - &::placeholder { - color: $text-color; - } - } - - .theme-btn { - position: absolute; - top: 4px; - right: 4px; - bottom: 4px; - text-transform: uppercase; - border: 1px solid rgba(203, 204, 207, 0.24); - - @include breakpoint (max-xxs){ - position: static; - margin-top: 20px; - color: $white; - } - } - } -} - -.fotter-bootom-2 { - border-top: 1px solid rgba(203, 204, 207, 0.24); - padding: 20px 0; - - .footer-wrapper { - @include flex; - justify-content: center; - gap: 100px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - @include breakpoint (max-sm) { - justify-content: start; - } - - p { - color: $white; - - @include breakpoint (max-sm) { - text-align: center; - } - - - span { - color: $theme-color; - text-transform: uppercase; - } - } - - .bottom-list { - @include flex; - gap: 40px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - @include breakpoint (max-sm) { - justify-content: center; - } - - li { - a { - color: $white; - - &:hover { - color: $theme-color; - } - } - } - } - } -} - - -.footer-widget-wrapper-3 { - padding: 70px 0 100px; - position: relative; - - @include breakpoint (max-xxl) { - padding: 70px 0 100px; - } - - @include breakpoint (max-lg) { - padding: 50px 0 80px; - } - - &::before { - position: absolute; - content: ""; - width: 1px; - height: 424px; - left: 600px; - background-color: rgba(203, 204, 207, 0.24); - top: 0; - bottom: 0; - - @include breakpoint (max-xxl) { - display: none; - } - } - - .single-footer-widget { - margin-top: 30px; - - .widget-title { - margin-bottom: 24px; - - h3 { - color: $white; - text-transform: uppercase; - } - } - - .footer-content { - h3 { - color: $white; - margin-bottom: 10px; - } - - p { - color: $white; - opacity: 0.7; - max-width: 551px; - margin-bottom: 30px; - } - - form { - max-width: 551px; - width: 100%; - } - - .form-clt { - position: relative; - - input { - width: 100%; - outline: none; - border: none; - background-color: $white; - color: $text-color; - line-height: 1; - padding: 25px 0px 25px 25px; - border-radius: 100px; - max-width: 551px; - - @include breakpoint (max-xxl) { - padding: 20px 0px 20px 10px; - font-size: 14px; - } - - @include breakpoint (max-lg) { - padding: 20px 0px 20px 10px; - font-size: 14px; - } - - @include breakpoint (max-sm) { - font-size: 14px; - } - - &::placeholder { - color: $text-color; - } - } - - .theme-btn { - position: absolute; - top: 4px; - right: 4px; - bottom: 4px; - text-transform: uppercase; - border: 1px solid rgba(203, 204, 207, 0.24); - background-color: $bg-color; - - &:hover { - background-color: $theme-color; - color: $white; - } - - @include breakpoint (max-xxl){ - right: 0; - top: 0; - bottom: 0; - padding: 2px 4px 2px 12px; - font-size: 14px; - - i { - margin-left: 10px; - } - } - } - } - - h6 { - color: $white; - margin-top: 15px; - - span { - color: $theme-color; - text-transform: uppercase; - font-size: 18px; - font-weight: 400; - } - } - } - - .contact-content { - p { - color: $white; - opacity: 0.7; - margin-bottom: 24px; - } - - h3 { - color: $white; - } - - .contact-list { - margin-top: 16px; - - li { - @include flex; - gap: 32px; - - a { - color: $white; - opacity: 0.7; - } - } - } - } - - .list { - li { - @include transition; - font-weight: 400; - - &:not(:last-child){ - margin-bottom: 20px; - } - - a { - color: rgba(255, 255, 255, 0.7); - } - - &:hover { - margin-left: 5px; - - a { - color: $theme-color; - } - } - } - } - } -} - -.footer-top-item { - @include flex; - justify-content: space-between; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 30Px; - padding-bottom: 10px; - } - - .footer-logo { - background-color: $theme-color-2; - padding: 18px 30px; - } - - .top-list { - @include flex; - gap: 40px; - - @include breakpoint (max-xxl) { - gap: 20Px; - } - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 15Px; - } - - li { - a { - font-weight: 500; - text-transform: uppercase; - color: $white; - - &:hover { - color: $theme-color; - } - } - } - } - - .social-item { - @include flex; - gap: 12px; - - a { - width: 40px; - height: 40px; - line-height: 40px; - background-color: $theme-color-2; - border-radius: 100px; - color: $white; - text-align: center; - - &:hover { - background-color: $theme-color; - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/_header.scss b/public/assets/scss/_header.scss deleted file mode 100644 index f6c8d71..0000000 --- a/public/assets/scss/_header.scss +++ /dev/null @@ -1,1264 +0,0 @@ -.header-top-section { - background-color: $theme-color-2; - position: relative; - z-index: 999; - - @include breakpoint (max-xxl) { - display: none; - } - - &::before { - @include before; - background-color: $theme-color; - left: 0; - right: initial; - width: 337px; - z-index: -1; - } - - .container-fluid { - padding: 0 40px; - - @include breakpoint (max-xxl) { - padding: 0 40px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } -} - -.header-top-wrapper { - @include flex; - justify-content: space-between; - padding: 10px 0; - - .header-left { - - .list { - @include flex; - gap: 60px; - - li { - color: rgba(255, 255, 255, 0.7); - - a { - color: rgba(255, 255, 255, 0.7); - } - - i { - margin-right: 12px; - color: $theme-color; - } - - &.style-2 { - color: $white; - - i { - color: $white; - } - - span { - font-size: 18px; - color: $white; - display: inline-block; - margin-right: 12px; - } - } - } - } - } - - .header-right { - @include flex; - gap: 45px; - - .flag-wrap { - position: relative; - width: 130px; - z-index: 9; - - @include breakpoint (max-xxl) { - display: none; - } - - i { - color: $white; - } - - .nice-select { - background: transparent; - border: none; - text-align: center; - margin: 0 auto; - position: relative; - z-index: 999; - padding: 10px 7px 10px 58px; - - span{ - font-size: 14px; - font-weight: 500; - // text-transform: capitalize; - color: $white; - } - - .list { - li { - color: $header-color; - } - } - - &::after { - border-bottom: 2px solid $white; - border-right: 2px solid $white; - height: 8px; - margin-top: -6px; - width: 8px; - right: 3px; - } - } - - .flag { - position: absolute; - top: 10px; - left: 32px; - z-index: 1; - - @include breakpoint(max-md){ - display: none - } - - } - } - - .social-item { - @include flex; - gap: 12px; - - a { - width: 32px; - height: 32px; - line-height: 32px; - background-color: #153888; - backdrop-filter: blur(46px); - border-radius: 100px; - color: $white; - text-align: center; - - &:hover { - background-color: $theme-color; - } - } - } - } -} - -.header-top-section-2 { - position: relative; - background-color: $header-color; - - .container-fluid { - padding: 0 100px; - - @include breakpoint (max-xl4) { - padding: 0 70px; - } - - @include breakpoint (max-xxxl) { - padding: 0 50px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } -} - -.header-top-wrapper-2 { - padding: 10px 0; - @include flex; - justify-content: space-between; - - @include breakpoint (max-xxl) { - display: none; - } - - .header-left { - @include flex; - gap: 32px; - - span { - color: rgba(255, 255, 255, 0.7); - border-radius: 88px; - background: rgba(255, 255, 255, 0.12); - backdrop-filter: blur(58px); - padding: 5px 8px; - line-height: 1; - - a { - color: rgba(255, 255, 255, 0.7); - } - } - } - - .social-item { - @include flex; - gap: 12px; - - a { - width: 40px; - height: 40px; - line-height: 40px; - background-color: #153888; - backdrop-filter: blur(46px); - border-radius: 100px; - color: $white; - text-align: center; - - &:hover { - background-color: $theme-color; - } - } - } -} - -.header-top-section-3 { - background-color: $header-color; - position: relative; - z-index: 999; - - @include breakpoint (max-xxl) { - display: none; - } - - &::before { - @include before; - background-color: $theme-color-2; - left: 0; - right: initial; - width: 337px; - z-index: -1; - - @include breakpoint (max-xxxl) { - width: 300px; - } - } - - .container-fluid { - padding: 0 100px; - - @include breakpoint (max-xl4) { - padding: 0 70px; - } - - @include breakpoint (max-xxxl) { - padding: 0 50px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } -} - -.header-top-wrapper-3 { - @include flex; - justify-content: space-between; - padding: 10px 0; - - .left-item { - margin-left: 280px; - - .social-item { - @include flex; - gap: 12px; - - a { - width: 40px; - height: 40px; - line-height: 40px; - background-color: #153888; - backdrop-filter: blur(46px); - border-radius: 100px; - color: $white; - text-align: center; - - &:hover { - background-color: $theme-color; - } - } - } - } - - .header-right { - - .list { - @include flex; - gap: 60px; - - li { - color: rgba(255, 255, 255, 0.7); - - a { - color: rgba(255, 255, 255, 0.7); - } - - i { - margin-right: 12px; - color: $theme-color; - } - } - } - } -} - -//>>>>> Header Main Start <<<<a { - color: $theme-color !important; - margin-left: 10px; - - &::before { - width: 10px; - } - - &::after { - color: $theme-color; - } - } - >.submenu { - -webkit-transform: translateY(1); - -moz-transform: translateY(1); - -ms-transform: translateY(1); - -o-transform: translateY(1); - transform: translateY(1); - visibility: visible; - opacity: 1; - } - } - } - li.has-dropdown { - >a { - &::after { - position: absolute; - top: 50%; - inset-inline-end: 25px; - -webkit-transform: translateY(-50%); - -moz-transform: translateY(-50%); - -ms-transform: translateY(-50%); - -o-transform: translateY(-50%); - transform: translateY(-50%); - color: $theme-color; - } - } - } - } - - .has-homemenu { - width: 800px; - padding: 30px 30px 10px 30px; - opacity: 0; - left: -250px; - visibility: hidden; - padding: 30px 30px 10px 30px; - background-color: $white; - - .homemenu-items { - @include flex; - gap: 30px; - justify-content: space-between; - - @include breakpoint (max-lg){ - flex-wrap: wrap; - } - - .homemenu { - position: relative; - .homemenu-thumb { - position: relative; - - .demo-button { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - opacity: 0; - visibility: hidden; - @include transition; - margin-top: 20px; - width: 100%; - padding: 0 12px; - - @include breakpoint (max-xxl){ - .theme-btn { - font-size: 14px; - min-width: 140px; - } - } - - .theme-btn { - background-color: $white; - padding-right: 0; - font-size: 16px; - font-weight: 500; - padding: 6px 6px 6px 24px; - - &:hover { - background-color: $theme-color; - color: $white; - } - } - } - - &::before { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 19, 19, 0)), to(#5e5ef6)); - background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #252527 100%); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - overflow: hidden; - opacity: 0; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - content: ""; - } - &:hover{ - - &::before { - visibility: visible; - opacity: 1; - } - - .demo-button { - opacity: 1; - visibility: visible; - margin-top: 0; - } - & .homemenu-btn { - opacity: 1; - visibility: visible; - bottom: 50%; - transform: translateY(50%); - } - } - img { - width: 100%; - } - } - - .homemenu-title { - text-align: center; - margin: 15px auto; - display: inline-block; - font-size: 16px; - font-weight: 600; - color: $header-color; - } - } - } - } - - &:hover { - >a { - color: $theme-color-2; - - &::after { - color: $theme-color; - } - } - >.submenu { - visibility: visible; - opacity: 1; - transform: scaleY(1) translateZ(0px); - } - } - } - } - } - - .header-right { - gap: 30px; - - @include breakpoint (max-xxl){ - gap: 20px; - } - - .search-toggler { - width: 40px; - height: 40px; - line-height: 40px; - text-align: center; - color: $theme-color; - border-radius: 100px; - border: 1px solid $theme-color; - font-size: 16px; - } - - .header-button { - @include breakpoint (max-xxl){ - display: none; - } - .theme-btn { - - &::before { - background-color: $white; - } - - &:hover { - color: $header-color; - } - } - } - - .sidebar__toggle { - cursor: pointer; - font-size: 20px; - color: $header-color; - } - } -} - -.header-1 { - - .container-fluid { - padding: 0 40px; - - @include breakpoint (max-xxl) { - padding: 0 50px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } - - .header-left { - @include flex; - gap: 120px; - - @include breakpoint (max-xxxl) { - gap: 50px; - } - } - - .header-right { - .header-call-item { - @include flex; - gap: 60px; - - .theme-btn { - padding: 4px 4px 4px 24px; - - @include breakpoint (max-xxl) { - display: none; - } - } - } - } - - &.header-2 { - z-index: 9999; - position: relative; - - &::before { - @include before; - background-color: $theme-color; - left: 0; - right: initial; - width: 337px; - z-index: -1; - - @include breakpoint (max-xxxl) { - width: 235px; - } - - @include breakpoint (max-xxl) { - width: 100%; - } - } - - &::after { - background-color: $theme-color; - right: 0; - position: absolute; - content: ""; - top: 0; - bottom: 0; - height: 100%; - width: 420px; - z-index: -1; - - @include breakpoint (max-xxxl) { - width: 350px; - } - - @include breakpoint (max-xxl) { - display: none; - } - } - - .container-fluid { - padding: 0 100px; - - @include breakpoint (max-xl4) { - padding: 0 70px; - } - - @include breakpoint (max-xxxl) { - padding: 0 50px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } - - .header-left { - .logo { - .header-logo { - display: none; - } - } - } - - .header-right { - - .header-call-item { - - .theme-btn { - color: $white; - - @include breakpoint (max-xxl) { - display: none; - } - - i { - background-color: $white; - color: $header-color; - } - } - - .sidebar__toggle { - color: $white; - } - } - } - } - - &.header-3 { - position: relative; - - &::before { - @include before; - background-color: $theme-color-2; - left: 0; - right: initial; - width: 337px; - z-index: -1; - - @include breakpoint (max-xxxl) { - width: 300px; - } - - @include breakpoint (max-xxl) { - display: none; - } - } - - .container-fluid { - padding: 0 100px; - - @include breakpoint (max-xl4) { - padding: 0 70px; - } - - @include breakpoint (max-xxxl) { - padding: 0 50px; - } - - @include breakpoint (max-xxl) { - padding: 0 30px; - } - - @include breakpoint (max-sm) { - padding: 0 15px; - } - } - - .logo { - position: absolute; - left: 100px; - top: -15px; - z-index: 999; - - @include breakpoint (max-xxl){ - display: none; - } - } - - .header-main { - padding-left: 280px; - - @include breakpoint (max-xxl){ - padding-left: 0; - } - - .header-left { - @include breakpoint (max-xxl){ - .logo-2 { - display: block !important; - } - } - } - - .header-right { - - .header-call-item { - .icon-item { - @include flex; - gap: 12px; - - @include breakpoint (max-xxl){ - display: none; - } - - i { - color: $header-color; - font-size: 30px; - } - - .content { - h6 { - margin-bottom: 5px; - } - span { - font-size: 18px; - - a { - color: $header-color; - } - } - } - } - } - } - } - } -} - -//>>>>> Header 01 Start <<<<>>>> Sticky Start <<<<>>>> Offcanvas Start <<<<>>>> Nice Select Css Start <<<<>>>> Nice Select Css End <<<< ul { - padding: 0; - margin: 0; - width: 100%; - list-style-type: none; - display: block !important; - } - - .mean-container a.meanmenu-reveal { - display: none !important; - } - - .mean-container .mean-nav ul li a { - display: block; - width: 100%; - padding: 10px 0; - color: $black; - font-size: 16px; - font-weight: 600; - line-height: 2; - font-weight: 700; - // text-transform: capitalize; - border-bottom: 1px solid rgba(0, 0, 0, 0.20) !important; - border: none; - - &:hover { - color: $theme-color-2; - } - } - - - .mean-container .mean-nav ul li .submenu li a { - border-bottom: none !important; - font-size: 14px; - padding: 6px 0; - color: $header-color; - } - - .mean-container .mean-nav ul li a:last-child { - border-bottom: 0; - } - .mean-container .mean-nav ul li a:hover { - color: $theme-color; - } - - .mean-container .mean-nav ul li a.mean-expand { - margin-top: 5px; - padding: 0 !important; - } - - .mean-container .mean-nav ul li > a > i { - display: none; - } - - .mean-container .mean-nav ul li > a.mean-expand i { - display: inline-block; - font-size: 18px; - } - - .mean-container .mean-nav > ul > li:first-child > a { - border-top: 0; - } - - .mean-container .mean-nav ul li a.mean-expand.mean-clicked i { - transform: rotate(45deg); - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - @include transition; - } - - .mean-container .mean-nav ul li .mega-menu li a { - height: 200px; - width: 100%; - padding: 0; - border-top: 0; - margin-bottom: 20px; - } \ No newline at end of file diff --git a/public/assets/scss/_mixins.scss b/public/assets/scss/_mixins.scss deleted file mode 100644 index 5eca375..0000000 --- a/public/assets/scss/_mixins.scss +++ /dev/null @@ -1,130 +0,0 @@ -@mixin breakpoint($point) { - @if $point==xsmall { - @media (min-width: 450px) { - @content ; - } - } - @else if $point==max-xxsmall { - @media (max-width:450px) { - @content ; - } - } - @if $point==xxs { - @media (min-width: 470px) { - @content ; - } - } - @else if $point==max-xxs { - @media (max-width:470px) { - @content ; - } - } - @if $point==xs { - @media (min-width: 500px) { - @content ; - } - } - @else if $point==max-xs { - @media (max-width: 500px) { - @content ; - } - } - @if $point==sm { - @media (min-width: 576px) { - @content ; - } - } - @else if $point==max-sm { - @media (max-width: 575px) { - @content ; - } - } - @else if $point==md { - @media (min-width: 768px) { - @content ; - } - } - @else if $point==max-md { - @media (max-width: 767px) { - @content ; - } - } - @else if $point==lg { - @media (min-width: 992px) { - @content ; - } - } - @else if $point==max-lg { - @media (max-width: 991px) { - @content ; - } - } - @else if $point==xl { - @media (min-width: 1200px) { - @content ; - } - } - @else if $point==max-xl { - @media (max-width: 1199px) { - @content ; - } - } - @else if $point==xxl { - @media (min-width: 1400px) { - @content ; - } - } - @else if $point==max-xxl { - @media (max-width: 1399px) { - @content ; - } - } - @else if $point==xxxl { - @media (min-width: 1600px) { - @content ; - } - } - @else if $point==max-xxxl { - @media (max-width: 1600px) { - @content ; - } - } - @else if $point==xl4 { - @media (min-width: 1899px) { - @content ; - } - } - @else if $point==max-xl4 { - @media (max-width: 1899px) { - @content ; - } - } -} - -@mixin before { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - content: ""; -} - - -@mixin flex { - display: flex; - align-items: center; -} -@mixin transition { - transition: all 0.4s ease-in-out; -} - -@mixin imgw { - width: 100%; - height: 100%; -} - - - diff --git a/public/assets/scss/_news.scss b/public/assets/scss/_news.scss deleted file mode 100644 index e33ee02..0000000 --- a/public/assets/scss/_news.scss +++ /dev/null @@ -1,886 +0,0 @@ -.news-card-item { - margin-top: 30px; - background-color: $bg-color; - border-radius: 16px; - - .news-image { - position: relative; - border-top-left-radius: 16px; - border-top-right-radius: 16px; - overflow: hidden; - - span { - border-radius: 100px; - background-color: $white; - color: $header-color; - font-size: 14px; - font-weight: 400; - padding: 4px 12px; - position: absolute; - top: 16px; - left: 16px; - z-index: 999; - } - - .news-layer-wrapper { - position: absolute; - top: 100%; - left: 0; - width: 100%; - height: 100%; - display: flex; - transition: 0.5s; - - .news-layer-image { - width: 25%; - height: 100%; - transition: 0.5s; - background-size: cover; - - &:nth-child(1){ - background-position: 0; - transition-delay: 0; - } - - &:nth-child(2){ - background-position: 33.33%; - transition-delay: 0.1s; - } - - &:nth-child(3){ - background-position: 66.66%; - transition-delay: 0.2s; - } - - &:nth-child(4){ - background-position: 100%; - transition-delay: 0.3s; - } - } - } - - img { - @include imgw; - border-top-left-radius: 16px; - border-top-right-radius: 16px; - transform: scale(1.02); - transition: all 1.5s ease-out; - } - } - - .news-content { - padding: 16px 24px 30px; - - .list { - @include flex; - gap: 24px; - margin-bottom: 10px; - } - - h3 { - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - - .news-bottom { - @include flex; - justify-content: space-between; - border-top: 1px solid rgba(203, 204, 207, 0.24); - padding-top: 24px; - margin-top: 16px; - - .info-item { - @include flex; - gap: 8px; - } - } - } - - &:hover { - .news-image { - - .news-layer-wrapper { - .news-layer-image { - transform: translateY(-100%); - } - } - - img { - -webkit-transform: scale3d(1.1, 1.1, 1); - transform: scale3d(1.1, 1.1, 1); - } - } - } -} - -.news-main-item { - border-radius: 16px; - background-color: $bg-color; - padding: 30px; - @include flex; - justify-content: space-between; - margin-top: 30px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 30px; - } - - .news-left-content { - h2 { - sup { - font-size: 32px; - top: auto; - - @include breakpoint (max-lg) { - font-size: 30px; - } - - @include breakpoint (max-lg) { - font-size: 25px; - } - } - - span { - font-size: 16px; - font-weight: 400; - } - } - - h3 { - - @include breakpoint (max-xl) { - br { - display: none; - } - } - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - - .news-post { - @include flex; - justify-content: space-between; - margin-top: 30px; - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 20px; - } - - span { - text-transform: uppercase; - font-weight: 500; - color: $header-color; - } - } - } - - .news-right-content { - @include flex; - gap: 30px; - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 20px; - } - - .news-image { - overflow: hidden; - transition: scale 0.4s ease, transform 0.4s ease; - - @include breakpoint (max-lg) { - flex-basis: 100%; - } - - img { - @include imgw; - border-radius: 16px; - } - } - - .content { - p { - max-width: 388px; - margin-bottom: 30px; - } - - .theme-btn { - padding: 2px 4px 2px 24px; - } - } - } -} - -.news-card-items-3 { - @include flex; - border-radius: 16px; - background-color: $white; - margin-top: 30px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 30px; - padding: 10px; - } - - @include breakpoint (max-lg) { - flex-wrap: initial; - gap: 30px; - padding: 0; - } - - @include breakpoint (max-md) { - flex-wrap: wrap; - gap: 30px; - padding: 10px; - } - - .news-image { - - @include breakpoint (max-xxl) { - flex-basis: 100%; - } - - @include breakpoint (max-lg) { - flex-basis: initial; - } - - @include breakpoint (max-sm) { - flex-basis: 100%; - } - - img { - border-top-left-radius: 16px; - border-bottom-left-radius: 16px; - - @include breakpoint (max-xxl) { - @include imgw; - border-radius: 16px; - } - - @include breakpoint (max-lg) { - width: initial; - height: initial; - border-top-left-radius: 16px; - border-bottom-left-radius: 16px; - } - - @include breakpoint (max-sm) { - @include imgw; - border-radius: 16px; - } - } - } - - .news-content { - padding: 25px 25px 25px 30px; - - @include breakpoint (max-lg) { - padding: 0 25px; - } - - h3 { - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - - .info-item { - @include flex; - gap: 26px; - margin-top: 15px; - margin-bottom: 25px; - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 10px; - } - - .info-image { - @include flex; - gap: 8px; - - h6 { - font-weight: 500; - text-transform: uppercase; - } - } - } - - .theme-btn { - border: none; - padding: 0; - - &:hover { - background-color: transparent; - color: $theme-color; - - i { - background-color: $header-color; - color: $white; - } - } - } - } -} - -.news-standard-wrapper { - - .news-standard-post { - margin-bottom: 30px; - - .news-image { - img { - @include imgw; - border-radius: 16px; - } - } - - .news-content { - margin-top: 24px; - - .news-list { - @include flex; - gap: 40px; - margin-bottom: 16px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 10px; - } - - li { - i { - margin-right: 8px; - } - } - } - - h3 { - margin-bottom: 10px; - - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - - p { - margin-bottom: 40px; - - @include breakpoint (max-xxl) { - margin-bottom: 30px; - } - } - - .theme-btn { - padding: 4px 4px 4px 24px; - } - } - } -} - -.main-sideber { - - .news-sideber-box { - padding: 30px; - background-color: $bg-color; - border-radius: 16px; - margin-bottom: 32px; - - .wid-title { - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 16px; - margin-bottom: 24px; - } - - .search-widget { - form { - width: 100%; - position: relative; - - input { - background-color: $white; - font-size: 16px; - font-weight: 400; - padding: 16px 20px; - width: 100%; - border: none; - color: $text-color; - border-radius: 100px; - } - - button { - position: absolute; - right: 3px; - top: 3px; - bottom: 3px; - width: 50px; - height: 50px; - line-height: 50px; - border-radius: 100px; - font-size: 16px; - background-color: $theme-color; - color: $white; - text-align: center; - transition: all .3s ease-in-out; - - &:hover { - background-color: $header-color; - } - } - } - } - - .news-widget-categories { - ul { - li { - @include flex; - justify-content: space-between; - font-size: 16px; - font-weight: 400; - background-color: $white; - @include transition; - border-radius: 100px; - line-height: 1; - padding: 20px; - position: relative; - - @include breakpoint (max-xxl) { - font-size: 14px; - } - - i { - margin-right: 5px; - color: $theme-color-2; - } - - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 0%; - height: 100%; - background: $theme-color; - z-index: 0; - transition: width 0.5s ease; - border-radius: 100px; - } - - a { - color: $header-color; - } - - span { - @include transition; - color: $header-color; - } - - &:not(:last-child){ - margin-bottom: 20px; - } - - &:hover { - &::before { - width: 100%; - } - - i { - color: $white; - } - - a { - color: $white; - position: relative; - z-index: 999; - } - - span { - color: $white; - position: relative; - z-index: 999; - } - } - } - } - } - - .recent-post-area { - .recent-items { - @include flex; - gap: 20px; - - &:not(:last-child){ - margin-bottom: 20px; - } - - .recent-thumb { - img { - border-radius: 8px; - } - } - - .recent-content { - h6 { - margin-bottom: 10px; - line-height: 133%; - font-weight: 500; - font-size: 18px; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - - @include breakpoint (max-xxl) { - font-size: 15px; - } - - a { - &:hover { - color: $theme-color; - } - } - } - - ul { - li { - color: $text-color; - } - } - } - } - } - - .tagcloud { - a { - display: inline-block; - padding: 12px 11px; - line-height: 1; - font-size: 16px; - font-weight: 400; - background: $white; - border-radius: 100px; - margin-right: 5px; - // text-transform: capitalize; - margin-bottom: 10px; - color: $text-color; - @include transition; - position: relative; - - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 0%; - height: 100%; - background: $theme-color; - border-radius: 100px; - z-index: 0; - transition: width 0.5s ease; - } - - &:last-child { - margin-right: 0; - } - - &:hover { - color: $white; - z-index: 999; - position: relative; - - &::before { - width: 100%; - z-index: -1; - } - } - } - } - } -} - -.news-details-wrapper { - - .news-details-post { - - .news-details-image { - img { - @include imgw; - border-radius: 16px; - } - } - - .details-content { - margin-top: 24px; - - .news-list { - @include flex; - gap: 40px; - margin-bottom: 16px; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 10px; - } - - li { - i { - margin-right: 8px; - } - } - } - - h2 { - font-size: 40px; - margin-bottom: 10px; - - @include breakpoint (max-xxl) { - font-size: 20px; - } - } - - .thumb { - img { - width: 410px; - height: 264px; - object-fit: cover; - border-radius: 16px; - } - } - - .sideber { - background-color: $theme-color-2; - padding: 24px 30px; - margin-top: 24px; - margin-bottom: 24px; - border-radius: 8px; - - h5 { - color: $white; - font-weight: 500; - - @include breakpoint (max-xxl) { - font-size: 16px; - } - } - } - - .tag-share-wrap { - - .tagcloud { - - span { - font-size: 20px; - font-weight: 600; - display: inline-block; - margin-right: 8px; - color: $header-color; - font-family: $heading-font; - } - - a { - display: inline-block; - padding: 12px 26px; - line-height: 1; - background: $bg-color; - margin-right: 8px; - // text-transform: capitalize; - color: $text-color; - font-weight: 400; - @include transition; - border-radius: 30px; - - @include breakpoint (max-xl){ - padding: 10px 18px; - } - - @include breakpoint (max-xl){ - margin-bottom: 15px;; - } - - &:hover { - background-color: $theme-color; - color: $white; - } - } - } - - .social-share { - - a { - font-size: 16px; - color: $header-color; - display: inline-block; - width: 36px; - height: 36px; - border-radius: 100px; - line-height: 36px; - text-align: center; - background-color: $bg-color; - - &:not(:last-child){ - margin-right: 10px; - } - - &:hover { - color: $white; - background-color: $theme-color; - } - } - } - } - - .comments-area { - margin-top: 40px; - border-top: 1px solid rgba(203, 204, 207, 0.24); - margin-top: 48px; - padding-top: 30px; - margin-bottom: 48px; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - - @include breakpoint (max-xxl) { - margin-bottom: 30px; - } - - .comments-heading { - margin-bottom: 30px; - - @include breakpoint (max-sm){ - margin-bottom: 20px; - } - } - - .news-single-comment { - - @include breakpoint (max-sm){ - flex-wrap: wrap; - gap: 20px; - } - - .image { - img { - border-radius: 12px; - } - } - - .content { - .head { - .con { - h4 { - margin-bottom: 5px; - } - } - - .reply { - font-weight: 500; - font-size: 16px; - color: $theme-color; - padding: 6px 14px; - text-transform: uppercase; - color: $white; - background-color: $header-color; - border-radius: 100px; - - &:hover { - background-color: $theme-color; - } - } - } - } - - &.style-2 { - margin-left: 90px; - - @include breakpoint (max-xxl){ - margin-left: 0; - } - } - } - } - - .form-clt { - position: relative; - - span { - color: $header-color; - font-size: 18px; - font-weight: 500; - font-family: $heading-font; - margin-bottom: 10px; - display: inline-block; - } - - input,textarea { - width: 100%; - border: none; - outline: none; - background: $bg-color; - color: $text-color; - border-radius: 100px; - padding: 18px 20px; - - @include breakpoint (max-md){ - padding: 14px 20px; - } - - @include breakpoint (max-sm){ - padding: 12px 18px; - } - - &::placeholder { - color: $text-color; - } - } - - textarea { - padding-bottom: 100px; - resize: none; - border-radius: 40px; - } - } - - .theme-btn { - width: 100%; - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/_preloader.scss b/public/assets/scss/_preloader.scss deleted file mode 100644 index cd1350e..0000000 --- a/public/assets/scss/_preloader.scss +++ /dev/null @@ -1,446 +0,0 @@ -.preloader { - align-items: center; - cursor: default; - display: flex; - height: 100%; - justify-content: center; - position: fixed; - left: 0; - top: 0; - width: 100%; - z-index: 9999999; - - .animation-preloader { - z-index: 1000; - - .spinner { - animation: spinner 1s infinite linear; - border-radius: 50%; - border: 3px solid rgba(0, 0, 0, 0.2); - border-top-color: $theme-color; - height: 9em; - margin: 0 auto 3.5em auto; - width: 9em; - - @media (max-width: 767px) { - width: 7.5em; - height: 7.5em; - margin: 0 auto 1.5em auto; - } - } - - .txt-loading { - font: bold 5em $heading-font, $body-font; - text-align: center; - user-select: none; - - @media (max-width: 767px) { - font-size: 2.5em; - } - - .letters-loading { - color: $theme-color; - position: relative; - - &:nth-child(2):before { - animation-delay: 0.2s; - } - - &:nth-child(3):before { - animation-delay: 0.4s; - } - - &:nth-child(4):before { - animation-delay: 0.6s; - } - - &:nth-child(5):before { - animation-delay: 0.8s; - } - - &:nth-child(6):before { - animation-delay: 1s; - } - - &:nth-child(7):before { - animation-delay: 1.2s; - } - - &:nth-child(8):before { - animation-delay: 1.4s; - } - - &::before { - animation: letters-loading 4s infinite; - color: $header-color; - content: attr(data-text-preloader); - left: 0; - opacity: 0; - font-family: $heading-font; - position: absolute; - top: -3px; - transform: rotateY(-90deg); - } - } - } - } - - p { - font-size: 15px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 8px; - color: $theme-color; - } - - .loader { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - font-size: 0; - z-index: 1; - pointer-events: none; - - .row { - height: 100%; - } - - .loader-section { - padding: 0px; - - .bg { - background-color: $bg-color; - height: 100%; - left: 0; - width: 100%; - transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); - } - } - } - - &.loaded { - .animation-preloader { - opacity: 0; - transition: 0.3s ease-out; - } - - .loader-section { - .bg { - width: 0; - transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); - } - } - } -} - - - - - - -.back-to-top { - background-color: $theme-color; - width: 50px; - height: 50px; - line-height: 40px; - border-radius: 100px; - color: $white; - font-size: 16px; - position: fixed; - display: inline-block; - z-index: 9999; - right: 30px; - bottom: 30px; - @include transition; - opacity: 0; - visibility: hidden; - transform: translateY(20px); - - @include breakpoint (max-sm) { - display: none; - } - - &:hover { - background-color: $white; - color: $theme-color-2; - } - - &.show { - opacity: 1; - visibility: visible; - transform: translate(0); - } -} - - - -.cursor-outer { - -webkit-margin-start: -12px; - margin-inline-start: -12px; - margin-top: -12px; - width: 30px; - height: 30px; - border: 1px solid $theme-color; - background-color: $theme-color; - -webkit-box-sizing: border-box; - box-sizing: border-box; - z-index: 10000000; - opacity: 0.34; - -webkit-transition: all 0.4s ease-out 0s; - transition: all 0.4s ease-out 0s; -} -.cursor-outer.cursor-hover { - opacity: 0.14; -} -.cursor-outer.cursor-big { - opacity: 0; -} -.mouseCursor { - position: fixed; - top: 0; - inset-inline-start: 0; - inset-inline-end: 0; - bottom: 0; - pointer-events: none; - border-radius: 50%; - -webkit-transform: translateZ(0); - transform: translateZ(0); - visibility: hidden; - text-align: center; -} -.mouseCursor.cursor-big { - width: 20px; - height: 20px; - -webkit-margin-start: -12px; - margin-inline-start: -12px; - margin-top: -12px; -} -.cursor-inner { - -webkit-margin-start: -3px; - margin-inline-start: -3px; - margin-top: -3px; - width: 10px; - height: 10px; - z-index: 10000001; - background-color: $theme-color; - opacity: 1; - -webkit-transition: all 0.24s ease-out 0s; - transition: all 0.24s ease-out 0s; - span { - color: $text-color; - line-height: 60px; - opacity: 0; - text-transform: uppercase; - letter-spacing: 1px; - font-size: 12px; - } -} -.cursor-inner.cursor-big { - span { - opacity: 1; - } -} -.cursor-inner.cursor-hover { - -webkit-margin-start: -10px; - margin-inline-start: -10px; - margin-top: -10px; - width: 30px; - height: 30px; - background-color: $theme-color; - border: 1px solid #686363; - opacity: 0; -} - - - -.search-popup { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: -2; - -webkit-transition: all 1s ease; - -khtml-transition: all 1s ease; - -moz-transition: all 1s ease; - -ms-transition: all 1s ease; - -o-transition: all 1s ease; - transition: all 1s ease; -} - -.search-popup__overlay { - position: fixed; - width: 224vw; - height: 224vw; - top: calc(90px - 112vw); - right: calc(50% - 112vw); - z-index: 3; - display: block; - -webkit-border-radius: 50%; - -khtml-border-radius: 50%; - -moz-border-radius: 50%; - -ms-border-radius: 50%; - -o-border-radius: 50%; - border-radius: 50%; - -webkit-transform: scale(0); - -khtml-transform: scale(0); - -moz-transform: scale(0); - -ms-transform: scale(0); - -o-transform: scale(0); - transform: scale(0); - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transition: transform 0.8s ease-in-out; - -khtml-transition: transform 0.8s ease-in-out; - -moz-transition: transform 0.8s ease-in-out; - -ms-transition: transform 0.8s ease-in-out; - -o-transition: transform 0.8s ease-in-out; - transition: transform 0.8s ease-in-out; - transition-delay: 0s; - transition-delay: 0.3s; - -webkit-transition-delay: 0.3s; - background-color: #000000; - opacity: 0.7; - cursor: url(../../assets/img/close.png), auto; -} - -@media (max-width: 767px) { - .search-popup__overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - transform: none; - width: 100%; - height: 100%; - border-radius: 0; - transform: translateY(-110%); - } -} - -.search-popup__content { - position: fixed; - width: 0; - max-width: 560px; - padding: 30px 15px; - left: 50%; - top: 50%; - opacity: 0; - z-index: 3; - -webkit-transform: translate(-50%, -50%); - -khtml-transform: translate(-50%, -50%); - -moz-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - -o-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - -webkit-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - -khtml-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - -moz-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - -ms-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - -o-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; - transition-delay: 0s, 0.8s, 0s; - transition-delay: 0s, 0.4s, 0s; - transition-delay: 0.2s; - -webkit-transition-delay: 0.2s; -} - -.search-popup__form { - position: relative; -} - -.search-popup__form input[type=search], -.search-popup__form input[type=text] { - width: 100%; - height: 66px; - border: none; - outline: none; - padding-left: 20px; - background-color: $white; - font-size: 16px; - font-weight: 400; - color: $text-color; - transition: all 500ms ease; -} - -.search-popup__form input[type=search]:focus, -.search-popup__form input[type=text]:focus { - color: $header-color; -} - -.search-popup__form .search-btn { - padding: 0; - width: 66px; - height: 66px; - display: flex; - justify-content: center; - align-items: center; - position: absolute; - top: 0; - right: -1px; - border-radius: 0; - font-size: 20px; - color: $white; - background-color: $theme-color; - @include transition; - - &:hover { - background-color: $black; - } -} - -.search-popup__form .eolexi-btn svg { - width: 1em; - height: 1em; - fill: currentColor; -} - -.search-popup.active { - z-index: 9999; -} - -.search-popup.active .search-popup__overlay { - top: auto; - bottom: calc(90px - 112vw); - -webkit-transform: scale(1); - -khtml-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); - transition-delay: 0s; - -webkit-transition-delay: 0s; - opacity: 0.7; - -webkit-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); - -khtml-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); - -moz-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); - -ms-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); - -o-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); - transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); -} - -@media (max-width: 767px) { - .search-popup.active .search-popup__overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - transform: none; - width: 100%; - height: 100%; - border-radius: 0; - transform: translateY(0%); - } -} - -.search-popup.active .search-popup__content { - width: 100%; - opacity: 1; - transition-delay: 0.7s; - -webkit-transition-delay: 0.7s; -} - diff --git a/public/assets/scss/_pricing.scss b/public/assets/scss/_pricing.scss deleted file mode 100644 index 6a2861d..0000000 --- a/public/assets/scss/_pricing.scss +++ /dev/null @@ -1,309 +0,0 @@ -/* Pricing Section */ -.pricing-wrapper-2 { - - .pricing-content { - position: relative; - z-index: 9; - - .pricing-text { - margin-top: 25px; - max-width: 548px; - } - - .nav { - background-color: $white; - border-radius: 24.5px; - padding: 10px 20px; - margin-top: 40px; - border: none; - - @include breakpoint (max-xxl) { - margin-top: 15px; - } - - .nav-tabs { - border-bottom: 0; - display: flex; - } - - .nav-link { - font-size: 16px; - font-weight: 700; - text-transform: uppercase; - border: 0; - border-radius: 0; - padding: 0 40px; - position: relative; - background: transparent; - z-index: 2; - color: $text-color; - margin-bottom: 0; - - &::before { - content: ""; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%) translateX(50%); - background: $theme-color; - width: 43px; - height: 22px; - border-radius: 20px; - } - - &::after { - content: ""; - position: absolute; - right: -18px; - top: 50%; - transform: translateY(-50%); - width: 17px; - height: 17px; - border-radius: 50%; - background: $white; - z-index: 1; - } - - &:first-child { - padding-left: 0; - } - &:last-child { - padding-right: 0; - - &::after, - &::before { - display: none; - } - } - - &.active { - color: $theme-color-2; - - &::after { - right: 0; - } - } - } - } - } - - .pricing-right-items { - display: flex; - align-items: center; - - .pricing-box-items { - max-width: 417px; - width: 100%; - border-radius: 20px; - background: $header-color; - padding: 40px; - - @include breakpoint (max-xxl) { - padding: 30px; - } - - @include breakpoint (max-sm) { - padding: 25px; - } - - .pricing-header { - position: relative; - border-bottom: 1px solid rgba(255, 255, 255, 0.2); - padding-bottom: 35px; - position: relative; - z-index: 9; - margin-bottom: 32px; - - .sub-texts { - top: 40px; - right: 0; - position: absolute; - font-size: 24px; - font-weight: 700; - color: $white; - - @include breakpoint (max-sm) { - font-size: 20px; - } - } - - h2 { - font-size: 72px; - font-weight: 700; - line-height: 1; - color: $white; - - @include breakpoint (max-sm) { - font-size: 50px; - } - - sup { - font-size: 32px; - font-weight: 700; - top: -1.5em; - margin-right: -10px; - - @include breakpoint (max-sm) { - top: -0.5em; - } - } - - sub { - font-size: 20px; - font-weight: 600; - // text-transform: capitalize; - margin-left: -10px; - } - } - } - - .theme-btn { - background: $theme-color; - color: $white; - border: none; - @include flex; - justify-content: space-between; - - i { - background-color: $white; - color: $header-color; - } - - &:hover { - background-color: $white; - color: $header-color; - - i { - background-color: $theme-color; - color: $white; - } - } - } - - ul { - margin-top: 24px; - - li { - color: $white; - - &:not(:last-child) { - margin-bottom: 15px; - } - - @include breakpoint (max-sm) { - font-size: 14px; - } - - i { - color: $theme-color-2; - margin-right: 8px; - - @include breakpoint (max-sm) { - margin-right: 5px; - } - } - } - } - - &.style-2 { - margin-left: -32%; - z-index: -1; - border-radius: 20px; - background: $white; - - @media (max-width: 767px) { - margin-left: -70%; - } - - .pricing-header { - - .sub-texts { - color: $header-color; - } - } - - .theme-btn { - width: 100%; - background-color: transparent; - border: 1px solid rgba(203, 204, 207, 0.24); - color: $header-color; - - i { - background-color: $theme-color; - color: $white; - } - } - - ul { - li { - color: $text-color; - } - } - } - - &::after { - display: none; - } - } - } -} - - -.pricing-card-items-3 { - border-radius: 16px; - background-color: $white; - backdrop-filter: blur(24px); - padding: 40px 48px; - margin-top: 30px; - @include transition; - - @include breakpoint (max-xl) { - padding: 30px; - } - - .pricing-header { - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 16px; - margin-bottom: 24px; - - h6 { - text-transform: uppercase; - font-weight: 500; - margin-bottom: 10px; - } - - h2 { - color: $theme-color-2; - } - } - - .pricing-list-box { - padding: 24px; - background-color: $bg-color; - margin-bottom: 30px; - border-radius: 16px; - - li { - color: $header-color; - - &:not(:last-child) { - margin-bottom: 15px; - } - - i { - color: $theme-color-2; - margin-right: 12px; - } - } - } - - .theme-btn { - width: 100%; - @include flex; - justify-content: space-between; - } - - &:hover { - transform: translateY(-10px); - } -} \ No newline at end of file diff --git a/public/assets/scss/_section.scss b/public/assets/scss/_section.scss deleted file mode 100644 index 30249ea..0000000 --- a/public/assets/scss/_section.scss +++ /dev/null @@ -1,126 +0,0 @@ - -//>>>>> Section Title Start <<<<>>>> Section Title End <<<<>>>> Basic Css Start <<<<>>>> Basic Css End <<<<* { - grid-area: 1 / 1 / 2 / 2; - width: 100%; - height: 100%; - max-height: 100%; - } - } - } - - .testimonial-content { - margin-left: 50px; - position: relative; - - @include breakpoint (max-xxl) { - margin-left: 0; - } - - .content { - .star { - color: $theme-color; - margin-bottom: 20px; - } - - h3 { - font-size: 28px; - line-height: 143%; - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 40px; - margin-bottom: 30px; - font-weight: 500; - - @include breakpoint (max-xxl) { - font-size: 24px; - } - - @include breakpoint (max-lg) { - font-size: 20px; - } - - @include breakpoint (max-sm) { - font-size: 16px; - } - } - - .info-item { - @include flex; - gap: 20px; - - .icon { - width: 56px; - height: 56px; - line-height: 56px; - text-align: center; - border-radius: 100px; - background-color: $theme-color-2; - color: $white; - font-size: 30px; - } - - .content { - border-left: 1px solid rgba(203, 204, 207, 0.24); - padding-left: 30px; - } - } - } - - .array-buttons-3 { - position: absolute; - right: 0; - bottom: 0; - @include flex; - gap: 24px; - - @include breakpoint (max-sm) { - display: none; - } - - .array-prev { - width: 48px; - height: 48px; - line-height: 48px; - text-align: center; - background-color: $bg-color; - color: $header-color; - @include transition; - z-index: 999; - border-radius: 100px; - transform: rotate(320deg); - - &:hover { - background-color: $theme-color; - color: $white; - } - } - - .array-next { - width: 48px; - height: 48px; - line-height: 48px; - text-align: center; - background-color: $theme-color; - color: $white; - @include transition; - z-index: 999; - border-radius: 100px; - transform: rotate(320deg); - border: 1px solid $theme-color; - - &:hover { - background-color: $bg-color; - color: $header-color; - border: 1px solid $bg-color; - } - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/_typography.scss b/public/assets/scss/_typography.scss deleted file mode 100644 index 1ff985e..0000000 --- a/public/assets/scss/_typography.scss +++ /dev/null @@ -1,174 +0,0 @@ -/* -------------------------------------------- - Template Default Fonts & Fonts Styles - ---------------------------------------------- */ - -@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap'); - -@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); - -$heading-font: 'Space Grotesk', serif; -$body-font: "Inter", sans-serif; -//font-family: "Font Awesome 6 Free"; -$fa: "Font Awesome 6 Pro"; - -body { - font-family: $body-font; - font-size: 16px; - font-weight: 400; - line-height: 24px; - color: $text-color; - background-color: $white; - padding: 0; - margin: 0; - overflow-x: hidden; - // // text-transform: capitalize; -} - -ul { - padding: 0; - margin: 0; - list-style: none; -} - -button { - border: none; - background-color: transparent; - padding: 0; -} - -input:focus{ - color: $white; - outline: none; -} - -input{ - color: $white; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: $heading-font; - margin: 0px; - padding: 0; - color: $header-color; - @include transition; - // text-transform: capitalize; -} - -h1 { - font-size: 72px; - font-weight: 700; - line-height: 111%; - - @include breakpoint(max-xl4){ - font-size: 70px; - } - - @include breakpoint(max-xxxl){ - font-size: 60px; - } - - @include breakpoint(max-xxl){ - font-size: 55px; - } - - @include breakpoint(max-xl){ - font-size: 40px; - } - - @include breakpoint(max-lg){ - font-size: 40px; - } - - @include breakpoint(max-md){ - font-size: 32px; - } - - @include breakpoint(max-sm){ - font-size: 28px; - } -} - -h2 { - font-size: 48px; - font-weight: 700; - line-height: 117%; - - @include breakpoint(max-xxl){ - font-size: 50px; - } - - @include breakpoint(max-xl){ - font-size: 38px; - } - - @include breakpoint(max-lg){ - font-size: 38px; - } - - @include breakpoint(max-md){ - font-size: 35px; - } - - @include breakpoint(max-sm){ - font-size: 30px; - } - - @include breakpoint(max-xxs){ - font-size: 25px; - } -} - -h3 { - font-size: 24px; - font-weight: 700; - line-height: 133%; - - @include breakpoint(max-xl){ - font-size: 20px; - } -} - -h4 { - font-size: 22px; - font-weight: 700; - line-height: 141%; - - @include breakpoint(max-xl){ - font-size: 20px; - } -} - -h5 { - font-size: 20px; - font-weight: 700; - line-height: 140%; -} - -h6 { - font-size: 16px; - font-weight: 600; -} - -a { - text-decoration: none; - outline: none !important; - cursor: pointer; - color: $header-color; - @include transition; -} - -p { - margin: 0px; - @include transition; -} - -span { - margin: 0px; - // @include transition; -} - diff --git a/public/assets/scss/_variables.scss b/public/assets/scss/_variables.scss deleted file mode 100644 index 79dda32..0000000 --- a/public/assets/scss/_variables.scss +++ /dev/null @@ -1,31 +0,0 @@ - -:root { - - --body: #fff; - --black: #000; - --white: #fff; - --theme: #E13833; - --theme-2: #0048B4; - --header: #151A26; - --text: #535761; - --text-2: #0B4E3D; - --border: #C9C9C9; - --border-2: #CBCCCF; - --bg: #F8F8F9; - --bg-2: #153888; - --box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.13); -} - -// Theme Color - Defualt Colors -$black: var(--black); -$white: var(--white); -$theme-color: var(--theme); -$theme-color-2: var(--theme-2); -$text-color: var(--text); -$text-color-2: var(--text-2); -$header-color: var(--header); -$border-color: var(--border); -$border-color-2: var(--border-2); -$bg-color: var(--bg); -$bg-color-2: var(--bg-2); -$shadow: var(--pp-box-shadow); \ No newline at end of file diff --git a/public/assets/scss/_visa.scss b/public/assets/scss/_visa.scss deleted file mode 100644 index 29eb210..0000000 --- a/public/assets/scss/_visa.scss +++ /dev/null @@ -1,565 +0,0 @@ -.visa-certification-wrapper { - - .visa-image { - margin-left: -310px; - - @include breakpoint (max-xxl) { - margin-left: 0; - } - - img { - @include imgw; - } - } - - .visa-certification-content { - margin-left: 17px; - - @include breakpoint (max-xxl) { - margin-left: 0; - margin-bottom: 100px; - margin-top: 100px; - } - - @include breakpoint (max-lg) { - margin-bottom: 80px; - margin-top: 0; - } - - .visa-item { - @include flex; - gap: 48px; - margin-top: 90px; - - @include breakpoint (max-xxl) { - margin-top: 30px; - gap: 30px; - } - - @include breakpoint (max-lg) { - flex-wrap: wrap; - gap: 30px; - } - - .nav { - display: grid; - gap: 30px; - - li { - font-size: 20px; - font-weight: 700; - font-family: $heading-font; - - @include breakpoint (max-xxl) { - font-size: 12px; - } - - @include breakpoint (max-lg) { - font-size: 16px; - } - - .nav-link { - color: $header-color; - @include transition; - padding: 16px 40px 16px 16px; - border-radius: 8px; - backdrop-filter: blur(28px); - background-color: $white; - line-height: 1; - - @include breakpoint (max-xxl) { - padding: 10px 10px 10px 10px; - } - - @include breakpoint (max-lg) { - padding: 16px 40px 16px 16px; - } - - i { - width: 24px; - height: 24px; - line-height: 24px; - text-align: center; - background-color: $theme-color; - color: $white; - border-radius: 50px; - font-size: 14px; - transform: rotate(-45deg); - margin-right: 6px; - } - - &.active { - position: relative; - background-color: $theme-color; - color: $white; - border-radius: 100px; - - i { - background-color: $white; - color: $theme-color; - } - } - } - } - } - - .content { - - .icon { - margin-bottom: 16px; - } - - p { - max-width: 479px; - margin-bottom: 40px; - margin-top: 10px; - } - } - } - } -} - -.visa-provide-box { - background-color: $white; - padding: 30px; - border-radius: 16px; - background-color: $white; - margin-top: 30px; - - .visa-top-item { - margin-bottom: 30px; - @include flex; - justify-content: space-between; - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - .visa-left { - @include flex; - gap: 16px; - - p { - color: $theme-color; - } - - h3 { - a { - background-position: 0 95%; - background-repeat: no-repeat; - background-size: 0% 2px; - display: inline; - - &:hover { - color: $theme-color; - background-size: 100% 2px; - background-image: linear-gradient(180deg, $theme-color 0%, $theme-color 100%); - } - } - } - } - - .theme-btn { - background-color: $bg-color; - - &:hover { - background-color: $theme-color; - color: $white; - } - } - } - - .visa-list-item { - @include flex; - justify-content: space-between; - - - @include breakpoint (max-xxl) { - flex-wrap: wrap; - gap: 20px; - } - - .list { - li { - font-size: 18px; - font-weight: 500; - font-family: $heading-font; - - @include breakpoint (max-xxxl) { - font-size: 16px; - } - - &:not(:last-child) { - margin-bottom: 20px; - } - - i { - width: 22px; - height: 22px; - line-height: 22px; - text-align: center; - border-radius: 50px; - background-color: $text-color; - color: $white; - margin-right: 8px; - font-size: 12px; - transform: rotate(-45deg); - } - } - } - } -} - -.visa-provide-section { - - .visa-slider { - margin-left: -400px; - margin-right: -400px; - - @include breakpoint (max-xxl) { - margin-right: 0; - margin-left: 0; - margin: 0 10px; - } - } -} - - -.visa-bottom { - position: relative; - margin-top: 70px; - - @include breakpoint (max-xxl) { - display: none; - } - - &::before { - background-color: $theme-color-2; - @include before; - width: 410px; - height: 132px; - padding: 16px 16px 16px 294px; - border-radius: 0 100px 100px 0; - - @include breakpoint (max-xxxl) { - display: none; - } - } - - &::after { - background-color: $theme-color-2; - position: absolute; - content: ""; - width: 410px; - height: 132px; - padding: 16px 16px 16px 294px; - border-radius: 100px 0 0 100px; - right: 0; - top: 0; - - @include breakpoint (max-xxxl) { - display: none; - } - } - - .visa-arrow-item { - @include flex; - justify-content: space-between; - - .array-prev { - width: 100px; - height: 100px; - line-height: 100px; - border-radius: 100%; - text-align: center; - background-color: $white; - color: $header-color; - position: relative; - z-index: 9; - margin-top: 16px; - margin-left: -15px; - font-size: 40px; - } - - .array-next { - width: 100px; - height: 100px; - line-height: 100px; - border-radius: 100%; - text-align: center; - background-color: $theme-color; - color: $white; - position: relative; - z-index: 9; - margin-top: 16px; - margin-right: -15px; - font-size: 40px; - } - - .flag-item { - @include flex; - gap: 24px; - - .flag-thumb { - position: relative; - transition: all 0.4s ease-in-out; - width: 120px; - height: 120px; - - img { - width: 100%; - height: 100%; - border-radius: 50%; - } - - &::before { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - content: ""; - background-color: rgba(5, 17, 26, 0.8); - border-radius: 50%; - transition: all 0.4s ease-in-out; - opacity: 0; - visibility: hidden; - } - - &::after { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - content: ""; - border: 5px solid $white; - border-radius: 50%; - transition: all 0.4s ease-in-out; - opacity: 0; - visibility: hidden; - } - - .country-name { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - z-index: 2; - transition: all 0.4s ease-in-out; - opacity: 0; - visibility: hidden; - - h4 { - font-size: 14px; - font-weight: 800; - // text-transform: capitalize; - text-align: center; - color: $white; - } - } - - &:hover { - &::before { - opacity: 1; - visibility: visible; - } - - &::after { - opacity: 1; - visibility: visible; - } - - .country-name { - opacity: 1; - visibility: visible; - } - } - } - } - } -} - - -.country-details-wrapper { - - .country-details-post { - - .details-image { - - img { - @include imgw; - border-radius: 24px; - } - } - - .country-details-content { - margin-top: 20px; - - h2 { - margin-bottom: 10px; - } - - h5 { - color: $theme-color-2; - margin-top: 30px; - } - - .tourist-visa-box { - border-radius: 16px; - padding: 30px; - background-color: $bg-color; - margin-top: 30px; - margin-bottom: 24px; - - .tourist-box { - @include flex; - gap: 50px; - - .tourist-content { - h5 { - color: $header-color; - margin-bottom: 5px; - margin-top: 0; - } - } - - &.style-2 { - padding-bottom: 15px; - border-bottom: 1px solid rgba(203, 204, 207, 0.7); - margin-bottom: 15px; - } - } - } - - .text { - font-size: 32px; - } - - .list-item { - margin-top: 20px; - margin-bottom: 30px; - - li { - color: $header-color; - font-size: 18px; - font-weight: 500; - font-family: $heading-font; - - &:not(:last-child) { - margin-bottom: 15px; - } - - span { - font-size: 16px; - font-weight: 400; - color: $text-color; - font-family: $body-font; - } - } - } - - .thumb { - img { - @include imgw; - border-radius: 16px; - } - } - - .visa-list-2 { - @include flex; - gap: 32px; - margin-bottom: 20px; - - li { - font-size: 20px; - font-weight: 500; - color: $header-color; - - i { - color: $theme-color-2; - margin-right: 8px; - } - } - } - } - } - - .country-details-sideber { - - .icon-box-item { - background-color: $bg-color; - border-radius: 8px; - padding: 12px 24px; - @include flex; - justify-content: space-between; - margin-bottom: 8px; - - .left-item { - @include flex; - gap: 16px; - } - - i { - color: $header-color; - } - } - - .visa-contact-box { - border-radius: 24px; - padding: 40px; - margin-top: 30px; - - .content { - h3 { - color: $white; - } - - p { - color: rgba(255, 255, 255, 0.7); - border-bottom: 1px solid rgba(203, 204, 207, 0.24); - padding-bottom: 16px; - margin-bottom: 24px; - } - - .icon-item { - @include flex; - gap: 16px; - margin-bottom: 24px; - - .icon { - width: 48px; - height: 48px; - line-height: 48px; - text-align: center; - border-radius: 100px; - background-color: #183074; - color: $white; - } - - .cont { - span { - color: rgba(255, 255, 255, 0.7); - } - - h6 { - color: $white; - font-size: 18px; - font-weight: 500; - - a { - color: $white; - } - } - } - } - } - } - } -} \ No newline at end of file diff --git a/public/assets/scss/main.scss b/public/assets/scss/main.scss deleted file mode 100644 index bc6977e..0000000 --- a/public/assets/scss/main.scss +++ /dev/null @@ -1,102 +0,0 @@ -/* -Theme Name: Visaway -Author: Gramentheme -Author URI: https://themeforest.net/user/Gramentheme/portfolio -Description: Visaway – Immigration & Visa Consulting HTML Template -Service Html Template -Version: 1.0.0 -*/ - -/*CSS Table Of Content Ends Here*/ - -/* --------------------------------------------------------------- -[Table of Contents] --------------------------------------------------------------- -01. Variables & Mixins -02. Typography -03. Buttons -04. About -05. Animation -06. Brand -07. Contact -08. Cta -09. Faq -10. Feature -11. Footer -12. Header -13. Helping -14. Hero -15. Marquee -16. Meanmenu -17. News -18. Preloader -19. Pricing -20. Section -21. Service -22. Testimonial -23. Visa - - --------------------------------------------------------------- -*/ - -//>> Basic Start <> Mixins <> Variables <> Buttons <> Typography <> Basic End <> Template Section Style Start <> About <> Animation <> Brand <> Contact <> Cta <> Faq <> Feature <> Footer <> Header <> Helping <> Hero <> Marquee <> MeanMenu <> News <> _Preloader <> _Pricing <> Section <> Service <> Testimonial <> Visa <> Template Section Style End <